Border radius

La propiedad border-radius de CSS controla el radio de curvatura de las esquinas de un elemento. Sin ella, todas las cajas tienen ángulos rectos; con ella puedes crear desde esquinas levemente suavizadas hasta círculos y cápsulas completas, sin imágenes ni JavaScript.

¿Cómo funciona border-radius?

Cada esquina se curva como una cuarta parte de una elipse. border-radius define los semiejes de esa elipse. Cuando ambos son iguales, la curva es perfectamente circular:

/* Mismo radio en las 4 esquinas */
.tarjeta {
  border-radius: 8px;
}

/* Un valor por esquina (sentido horario: arriba-izq, arriba-der, abajo-der, abajo-izq) */
.tab {
  border-radius: 8px 8px 0 0;
}

Círculos y cápsulas

Dos formas muy habituales en interfaces modernas:

/* Círculo perfecto (requiere width = height) */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* Cápsula (pill): radio muy grande para cualquier alto */
.badge {
  border-radius: 999px;
}

Para el círculo es imprescindible que width y height sean iguales. El 50% toma la mitad de cada dimensión como radio; si son iguales, la elipse degenera en círculo.

Formas orgánicas con la barra /

La barra / separa el radio horizontal del vertical en cada esquina, permitiendo elipses asimétricas:

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Combinado con un gradiente CSS o un color de fondo sólido elegido con el selector de color HEX, este truco genera las formas fluidas (blobs) tan populares en diseño web moderno.

Efecto sobre el box-shadow

border-radius también afecta a la forma de las sombras definidas con box-shadow. Si el elemento tiene esquinas redondeadas, la sombra sigue ese contorno en lugar de ser rectangular.

Errores comunes

• Elemento sin dimensiones fijas para círculos: si el contenedor se ajusta al contenido, 50% genera una elipse. Define width y height explícitos.
• Tablas con border-collapse: collapse: los navegadores ignoran border-radius en celdas <td> cuando la tabla colapsa los bordes. Necesitas border-collapse: separate para que funcione.
• border-radius y outline: la propiedad redondea el border, no el outline. Si usas un foco de teclado con outline, este seguirá siendo rectangular salvo que añadas outline-offset o uses clip-path.