Inset Border-Radius usando gradientes CSS3

Conseguir um raio de borda inserido sem imagens é possível através do uso de gradientes CSS3. Essa abordagem envolve a camada de vários gradientes radiais transparentes para criar a ilusão de uma borda curvada para dentro ao redor de um elemento.

O código CSS a seguir emprega a solução de Lea Verou para criar um raio de borda inserido usando gradientes:

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

Neste código, vários gradientes radiais transparentes são posicionados em pontos específicos ao redor do elemento para criar a ilusão de uma curva interna. O resultado é um conjunto de gradientes transparentes com curvas, produzindo um efeito de raio de borda inserido.

É importante observar que esta solução requer suporte para RGBA e gradientes, que podem não ser suportados por todos os navegadores mais antigos e requer aprimoramento progressivo ou substituto baseado em imagem para navegadores mais antigos que não suportam gradientes.