La propiedad border-radius redondea las esquinas de un elemento. Su abreviatura es compacta, y entender cómo se asignan los valores a las esquinas te permite escribir exactamente la forma que quieres.
De uno a cuatro valores
- Un valor: lo usan las cuatro esquinas.
border-radius: 12px. - Dos valores: el primero es para arriba a la izquierda y abajo a la derecha, el segundo para arriba a la derecha y abajo a la izquierda.
- Tres valores: arriba a la izquierda, luego arriba a la derecha y abajo a la izquierda juntas, y después abajo a la derecha.
- Cuatro valores: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda, en sentido horario desde la esquina superior izquierda.
Porcentajes y unidades
Los valores pueden ser longitudes (px, rem) o porcentajes. Un porcentaje es relativo al tamaño del propio elemento: el radio horizontal se mide contra el ancho y el vertical contra el alto.
Esquinas elípticas con la barra
Una esquina suele ser un cuarto de círculo. Escribir dos conjuntos de valores separados por una barra da radios horizontal y vertical distintos, de modo que la esquina se convierte en un cuarto de elipse: border-radius: 50% 20% / 10% 40%. Los valores antes de la barra son radios horizontales y los de después son radios verticales. Así se hacen las formas orgánicas tipo gota, y un generador visual es la forma más fácil de explorarlas.
Formas comunes
- Círculo:
border-radius: 50%en un elemento cuadrado. - Píldora o cápsula: un valor muy grande como
9999pxen un rectángulo, de modo que el radio se limita a la mitad de la altura. - Solo redondeado arriba:
border-radius: 16px 16px 0 0. - Hoja:
border-radius: 0 100% 0 100%.
Qué pasa cuando los radios son demasiado grandes
Si los radios de un lado suman más que la longitud del lado, los navegadores reducen todos los radios proporcionalmente para que quepan. Por eso 9999px funciona como píldora sin ningún cálculo.
Preguntas frecuentes
¿border-radius recorta el contenido? No por defecto. Añade overflow: hidden si el contenido hijo, como una imagen, debe seguir las esquinas redondeadas.
¿Funciona con bordes y sombras? Sí. Las sombras de caja y los contornos siguen la forma redondeada.