Raio de borda invertido CSS

Todo mundo sabe como fazer bordas arredondadas, está bem ali nas especificações CSS3. Já se perguntou como fazer bordas com raio invertido em CSS puro? Eu estava enfrentando esse desafio há um tempo e só queria compartilhar os resultados.

Você começa com esta estrutura HTML

<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> Como você pode ver, são necessários alguns elementos DOM extras para conseguir isso. </small>

O seguinte CSS resolverá o problema

.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;
}

Você pode controlar o raio da borda alterando a largura e a altura do e ajustar as margens de acordo, que é metade da largura / altura. Exceto que a margem inferior do elemento precisa ser subtraída por duas vezes o número de pixles da espessura da borda, que neste caso é 2px. 1px na parte superior e 1px na parte inferior..inner i.bottom.inner

Uma coisa a observar sobre isso é que você precisará de uma cor de fundo sólida do contêiner pai. Como você pode ver, o tem um conjunto de cores de fundo, então isso não funcionará se você estiver colocando isso em uma imagem de fundo ou gradiente..inner i

Você pode ver os resultados na parte inferior da nossa página de empregos: https://layer.com/jobs