Create Inverted Corner Border Radius

In this article we’ll show you how to create an inverted corner border radius. We all know how to create a standard rounded corner using the css property border-radius, but to create an inverted corner there are no properties that can be used, so we need to create these corners in pure css code.

There are two ways that you can create an inverted corner, they are:
1. Using four circles and using the css property position to position the circles.
2. Using the pseudo class :before and :after and the position property.

We will look at option one first to create our corners. You will need the following html code:

<div class="corners">
  <div class="arc-top-l"></div>
  <div class="arc-top-r"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
  <div class="arc-bottom-l"></div>
  <div class="arc-bottom-r"></div>
</div>

With the above code we have added four div’s, these will each be positioned using css into the corners of our container. Now with the css that we will need.

.corners {
  background: #eee;
  color: #333;
  position:relative;
  overflow:hidden;
}
.text{
  border: 1px solid #ccc;  
  padding:8px 20px 8px;
}
.arc-bottom-l, .arc-bottom-r, .arc-top-l, .arc-top-r {
  position:absolute;
  background:#fff;
  width:24px;
  height:24px;
  border-radius:50%;
  border: 1px solid #ccc;
}
.arc-bottom-l {
  bottom:-12px;
  left:-12px;
}
.arc-bottom-r {
  bottom:-12px;
  right:-12px;
}
.arc-top-l {
  top:-12px;
  left:-12px;
}
.arc-top-r {
  top:-12px;
  right:-12px;
}

So lets break this down a bit, to find out what the above classes do.
.corners and .text – Here we will create our basic container with border and background colors. If we finished here, we would only create an rectangle box. We have added padding so the text is away from our corners.
.arc-bottom-l, .arc-bottom-r, .arc-top-l, .arc-top-r – These classes will now position each circle at their respective corners, if we had not added the property overflow:hidden in .corners we would see a complete circle, but with it, we only display a quarter of the circle as 3 quarters of the circle is outside our container.

Using the above code will display the following:

OK that is one way, so what about option 2. Here we will be using the pseudo class :before and :after to create our inverted corners. The html code is similar to the above with just a few differences.

<div class="corners">
  <div class="arc-top"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
  <div class="arc-bottom"></div>
</div>

Here we just have one class for the top corners and one class for the bottom corners, Now with the css code:

.corners {
  background: #eee;
  color: #333;
  position:relative;
  overflow:hidden;
}
.text{
  border: 1px solid #ccc;  
  padding:8px 20px 8px;
}
.arc-top, .arc-bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
}
.arc-top:before, .arc-top:after, .arc-bottom:before, .arc-bottom:after {
  content:'';
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%; 
}
.arc-top:before {
  top: -12px;
  left: -12px;
}
.arc-top:after {
  top: -12px;
  right: -12px;
}
.arc-bottom:before {
  bottom: -12px;
  left: -12px;
}
.arc-bottom:after {
 bottom: -12px;
 right: -12px; 
}

An example using the above code will result in the following:

So which option do I prefer? I tend to lean towards the first option without the pseudo classes, it does use less css code, but it does use more html code. Overall both options do exactly the same job, so you really can’t go wrong with either.

I hope you enjoyed this article, if you want to experiment with the above code, just click on the button below.

Demo