Border radius inset or inverted rounded corners
At work today I was asked if it was possible to make inverted rounded corners on an element using CSS3, and it was a fun little challenge. I thought maybe I would find that border radius has an “inset” property that can be applied, and the W3C probably should have considered adding that. Ah well, it still turned out to be relatively simple, and I thought I’d document in case it can help anyone else.
The HTML markup was only 2 elements:
<div class="box"><p class="boxBtm">Some text in the box</p></div>
The P tag could be any element as long as the class is included so the CSS is applied. The CSS takes advantage of the :before and :after pseudo-elements to cut out the corners:
body {
background: #fff;
}
.box {
background: #b2b2b2;
height: 60px;
width: 210px;
margin: 25px;
padding: 20px;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -9px;
left: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
}
.box:after{
content: "";
display: block;
background: #fff;
position: absolute;
top: -9px;
right: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
}
.box p {
color: #fafafa;
}
.box .boxBtm:before {
content: "";
display: block;
background: #fff;
position: absolute;
bottom: -9px;
left: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
}
.box .boxBtm:after{
content: "";
display: block;
background: #fff;
position: absolute;
bottom: -9px;
right: -9px;
width: 20px;
height: 20px;
border-radius: 20px;
}
The outside box is set to position: relative and overflow:hidden. Other than that, it can be styled however you like. Then the pseudo-elements (:before, :after) are set to display:block and position: absolute, and positioned at the top left and right corners.
Because you can only have 1 “set” of pseudo-elements on a single element, the set for the bottom corner are applied to an inner element and positioned absolutely on the bottom left and right corners.
Both sets of pseudo-elements are positioned so they notch the corner out, and then a border-radius is applied to each set. By adjusting the positioning and size of the pseudo-elements, the size of the cut-outs can be controlled.
Here is a jsfiddle of the finished example.
And here is a jsfiddle example with the overflow: hidden removed and a black background applied so you can clearly see what is going on.
One downside of this technique is that your cut-outs background must match the background of the element the box is sitting on top of. You can apply a stylistic border to the element or background, and they will be notched out by the corners as well.
I’m not the first to come up with this type of technique. After I created the above post earlier, I did a bit of Googling and came across the following similar technique published by TutsPlus+ in reference to making “Ticket tags.” (Didn’t think to search for CSS3 tickets till after I created the jsfiddle seen above.) And two other techniques that use CSS3 gradients from Lea Verou:
So there you have it. Inverted rounded corners or border radius inset, however you prefer to call it. Or just simply ticket tag corners. A few different techniques to choose from. They work in browsers that support border-radius, or in the case of the Lea Verou techniques, CSS3 radial gradients. With browser prefixes, that extends the usage back far enough to make it pretty usable in the “wild”, with a graceful degradation in old IEs to boxes with square corners (as usual, old IE is a bit of a square.)