Inset Border-Radius with CSS3

Em CSS3, obter o raio de borda inserido, onde os cantos são curvados para dentro em vez de para fora, pode ser desafiador sem usar imagens. No entanto, existe uma solução inteligente que utiliza gradientes CSS3.

A abordagem engenhosa de Lea Verou envolve a criação de uma série de gradientes transparentes com curvas, criando a ilusão de raio de borda inserido. Ao posicionar esses gradientes com precisão, você pode obter o efeito de cantos arredondados desejado.

Seu código CSS, como visto abaixo, define uma classe personalizada para um elemento com o raio de borda inserido desejado:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Aplicar esta classe a um elemento resultará em um elemento com raio de borda inserido. É importante notar que esta técnica depende de suporte para rgba e gradientes, tornando-se uma estratégia de aprimoramento progressivo. Para navegadores mais antigos ou que não suportam gradientes, um substituto baseado em imagem é recomendado para fornecer suporte.