Insertar radio de borde con CSS3

En CSS3, lograr un radio de borde insertado, donde las esquinas están curvadas hacia adentro en lugar de hacia afuera, puede ser desafiante sin usar imágenes. Sin embargo, existe una solución inteligente que utiliza gradientes CSS3.

El ingenioso enfoque de Lea Verou implica la creación de una serie de gradientes transparentes con curvas, creando la ilusión de un radio de borde insertado. Al colocar estos degradados con precisión, puede lograr el efecto de esquinas redondeadas deseado.

Su código CSS, como se ve a continuación, define una clase personalizada para un elemento con el radio de borde insertado deseado:

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 clase a un elemento dará como resultado un elemento con un radio de borde insertado. Es importante tener en cuenta que esta técnica se basa en la compatibilidad con rgba y gradientes, lo que la convierte en una estrategia de mejora progresiva. Para navegadores más antiguos o navegadores que no admiten degradados, se recomienda un respaldo basado en imágenes para brindar soporte.