Existe una Fórmula para crear el border-radius perfecto en CSS y necesitas saberla

Si tienes bordes redondeados en un elemento que esta dentro de otro que también tiene el borde redondeado hay un pequeño truco para que quede bien.

Quizás lo más intuitivo es ponerle el mismo valor de border-radius a ambos. Pero si haces eso no quedará bien.

Fijate en este ejemplo:

.outer-box {
    border-radius: 20px;
    padding: 20px;
}

.inner-box {
    border-radius: 20px;
}

En las esquinas el margen que queda entre la esquina del cuadrado grande y el pequeño es mayor que la distancia que hay en el resto.

Para solucionar esto existe una fórmula or = ir + p, o lo que es lo mismo sumarle el padding al border-radius exterior.

Vamos a probar a crear el mismo cuadrado de antes pero aplicando la formula, fijate en el nuevo resultado, mucho mejor:

.outer-box {
    border-radius: 40px;
    padding: 20px;
}

.inner-box {
    border-radius: 20px;
}

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!