Convex Borders – CSS

Here is a method to create convex borders for a box through CSS with no extra element. Check out HTML and CSS in the tabs below.

---

Demo

Open demo in a full window – https://demos.webdevpuneet.com/css/convex-borders/index.html

---

HTML

<div class="box">
    This is some text
</div>

CSS

<style>
        .box {
          width: 400px;
          height: 200px;
          background-color: #ccc;
          border:3px solid red;
          border-radius: 0 0 0 0;
          position: relative;
          margin-left:30px;
          border-left:0px;
          border-right:0px;
          font-weight:bold;
          font-size:30px;
          text-align:center;
          padding:30px;
          box-sizing:border-box;
          padding-top:70px;
        }
        .box::before {
          border:3px solid red;
          height: 200px;
          width: 20px;
          border-radius: 100% 0% 0% 100%;
          content: '';
          position: absolute;
          top: -3px;
          left: -20px;
          border-right:0px;
          background-color: #ccc;
          box-sizing:border-box;
        }

        .box::after{
          border:3px solid red;
          height: 200px;
          width: 20px;
          border-radius: 0% 100% 100% 0%;
          content: '';
          position: absolute;
          top: -3px;
          right: -20px;
          border-left:0px;
          background-color: #ccc;
          box-sizing:border-box;
        }
      </style>