CSS inverted border radius

Everybody knows how to make rounded borders, it's right there in the CSS3 spec. Ever wondered how to do borders with radius inverted in pure CSS? I was facing this challenge a while ago and I just wanted to share the results.

You start off witht this HTML structure

<div class="outer">
  <div class="inner">
    <i class="top left"></i>
    <i class="top right"></i>
    <div class="content"></div>
    <i class="bottom right"></i>
    <i class="bottom left"></i>
  </div>
</div>

<small>As you can see it takes quite a few extra DOM elements to achieve this.</small>

The following CSS will do the trick

.outer {
  overflow: hidden;
}
.inner {
  border: 1px solid #888;
}
.inner i {
  width: 40px;
  height: 40px;
  border: 1px solid #888;
  border-radius: 50%;
  background-color: #fff;
}
.inner .top {
  margin-top: -20px;
}
.inner .bottom {
  margin-top: -20px;
  margin-bottom: -22px;
}
.inner .left {
  float: left;
  margin-left: -20px;
}
.inner .right {
  float: right;
  margin-right: -20px;
}
.content {
  min-height: 80px;
}

You can control the border radius by changing the width and the height of the .inner i and adjust the margins accordingly, which is half of the width/height. Except the margin-bottom fo the .bottom element needs to be substracted by twice the number of pixles of the .inner border thickness which is this case is 2px. 1px on top and 1px on the bottom.

One thing to note about this is that you will need a solid background color of the parent container. As you can see the .inner i has a backgournd-color set, so this won't work if you are placing this on a background image or a gradient.

You can see the results at the bottom our Jobs page: https://layer.com/jobs