Radio de borde insertado usando degradados CSS3

Es posible lograr un radio de borde insertado sin imágenes mediante el uso de degradados CSS3. Este enfoque implica superponer varios degradados radiales transparentes para crear la ilusión de un borde curvo hacia adentro alrededor de un elemento.

El siguiente código CSS emplea la solución de Lea Verou para crear un radio de borde insertado usando degradados:

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

En este código, se colocan múltiples degradados radiales transparentes en puntos específicos alrededor del elemento para crear la ilusión de una curva hacia adentro. El resultado es un conjunto de degradados transparentes con curvas, que producen un efecto de radio de borde insertado.

Es importante tener en cuenta que esta solución requiere compatibilidad con RGBA y degradados, que pueden no ser compatibles con todos los navegadores antiguos y requieren mejora progresiva o una alternativa basada en imágenes para navegadores más antiguos que no admiten gradientes.