CSS3 utiliza la propiedad "box-shadow" combinada con "outline" para crear "redondeos de borde"

box-shadow: Añade un efecto de sombra circundante al bloque de elementos.

Sintaxis: box-shadow: h-shadow v-shadow desenfoque dispersión color inserto

*Hay otro caso: box-shadow: 0 2px 2px #FECC84

p>

Cuando solo escribimos tres valores antes del valor del color, el tercer valor es desenfoque (distancia de desenfoque).

Usando el atributo de sombra, también puedes lograr el efecto del borde exterior:

Cuando le agregamos un contorno, encontraremos que logra las esquinas redondeadas internas del borde:

* Acerca de por qué sucede esto:

El trazo del contorno no sigue las esquinas redondeadas, por lo que se muestra como un ángulo recto.

Entonces, al superponer los dos, box-shadow simplemente llena el espacio entre el trazo y las esquinas redondeadas del contenedor.

*Vale la pena señalar que el valor del tamaño de la sombra del cuadro-sombra no es necesariamente igual al ancho del trazo, está relacionado con el tamaño de las esquinas redondeadas. Así que sólo uno lo suficientemente grande para llenar el vacío. De hecho, especificar un valor igual al ancho del trazo puede mostrarse inesperadamente en algunos navegadores, por lo que un valor menor es mejor.

Libro de referencia: "CSS Revealed" de Lea Verou