Cuando un elemento redondeado está dentro de otro, las dos curvas deben correr en paralelo, con el mismo espacio en toda la esquina. Si el radio interior es muy grande o muy pequeño, el espacio se estrecha en las esquinas y todo se ve un poco mal, aunque nadie sepa decir por qué.
La regla
Radio interior = radio exterior - relleno. Las dos curvas comparten el mismo centro, y eso mantiene parejo el espacio. Una tarjeta con radio de 24 px y 8 px de relleno contiene un hijo con radio de 16 px. Con 16 px de relleno el hijo tiene 8. Cuanto mayor el relleno, menor el radio interior.
Cuando el relleno es tan grande como el radio
Si el relleno es igual o mayor que el radio exterior, la resta da cero o negativo. Las esquinas interiores deben ser rectas (0): ya no queda curva que seguir, y una esquina interior redondeada parecería otra forma flotando dentro de la tarjeta.
Los errores que evitar
- El mismo radio en ambos: el espacio queda grueso en las esquinas y delgado en los lados, y la tarjeta se ve hinchada.
- Un radio interior menor que el de la regla: la esquina interior se ve puntiaguda contra su marco.
- Olvidar los bordes: un borde de 1 px cuenta como relleno, réstalo también.
- Mezclar radios por intuición: elige dos o tres radios para el sistema y deriva el resto.
En CSS
.card {
--radius: 24px;
--padding: 8px;
padding: var(--padding);
border-radius: var(--radius);
}
.card > .inner {
border-radius: max(0px, calc(var(--radius) - var(--padding)));
}Guardar el radio y el relleno en propiedades personalizadas hace que el radio interior se actualice solo cuando cambia cualquiera de los dos.
En Figma
Pon en el marco interior un radio de esquina igual al radio exterior menos el relleno. Si usas variables, crea una por nivel (por ejemplo radius-card 24 y radius-inner 16) para que un cambio en la tarjeta se propague. Un marco con Recortar contenido activado también recorta a sus hijos con sus propias esquinas.
Para practicar
Radio concéntrico muestra seis tarjetas con una caja dentro de otra. Mueve el radio interior hasta que el espacio se vea parejo y mira la resta que hay detrás de la respuesta.