border-radius

border-radius redondea las esquinas del borde de un elemento. Aunque su nombre menciona al borde, funciona incluso cuando no hay border declarado — lo que redondea es la caja en sí: el borde, el fondo y el área de recorte. Un <div> con background-color y border-radius: 12px tendrá las esquinas del fondo redondeadas aunque no tenga ningún borde visible.

La propiedad admite una variedad notable de sintaxis: un solo valor aplica el mismo radio a las cuatro esquinas; cuatro valores aplican radios distintos (top-left, top-right, bottom-right, bottom-left, en sentido horario); porcentajes que se calculan respecto al tamaño del elemento; y la sintaxis elíptica con / que produce esquinas con forma de elipse en lugar de arco de círculo. Esta flexibilidad hace que border-radius sea la herramienta para pastillas, círculos, formas orgánicas y esquinas asimétricas.

Uno de los valores más usados en la práctica es 50% en elementos cuadrados: cuando el radio es la mitad del tamaño, las cuatro esquinas redondeadas se unen formando un círculo perfecto. Este truco transforma cualquier cuadrado en avatar circular con una sola línea de CSS. Si el elemento no es cuadrado, 50% produce una elipse en lugar de un círculo.

Cómo funciona

border-radius actúa como una máscara de recorte sobre la caja. El navegador calcula el arco de círculo (o elipse) en cada esquina y recorta todo lo que queda fuera de esa forma redondeada: el borde, el fondo y el contenido. Esta propiedad no altera el box model: el espacio que ocupa el elemento en el layout no cambia, los elementos vecinos no se desplazan, y los clics/toques siguen siendo sobre el rectángulo completo (no sobre la forma redondeada).

Si el elemento tiene overflow: visible (el default), el contenido puede desbordarse fuera del radio redondeado. Para que el contenido también se recorte, se necesita overflow: hidden.

Sintaxis

/* 1 valor: todos los radios iguales */
.tarjeta { border-radius: 8px; }

/* 2 valores: top-left/bottom-right · top-right/bottom-left */
.asimetrico { border-radius: 8px 16px; }

/* 3 valores: top-left · top-right/bottom-left · bottom-right */
.forma { border-radius: 8px 16px 4px; }

/* 4 valores: top-left · top-right · bottom-right · bottom-left (sentido horario) */
.hoja { border-radius: 32px 8px 32px 8px; }

/* Longhands por esquina */
.tarjeta {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Porcentajes */
.circulo  { border-radius: 50%; } /* círculo (en cuadrado) o elipse */
.pastilla { border-radius: 9999px; } /* pastilla / pill */

/* Sintaxis elíptica con / */
.hoja-ancha { border-radius: 50% / 20%; } /* elipse horizontal */

Valores

Longitudes (px, em, rem)

Valores absolutos o relativos. Un radio de 0 produce una esquina recta. La mayoría de los sistemas de diseño usan valores en px de una escala fija (4px, 8px, 12px, 16px, 24px).

.mínimo    { border-radius: 2px; }
.estándar  { border-radius: 8px; }
.grande    { border-radius: 20px; }

Porcentajes

El porcentaje se calcula respecto al tamaño del elemento: el radio horizontal se calcula sobre el ancho y el radio vertical sobre el alto. En un cuadrado de 80×80px, 50% produce un radio de 40px en cada eje — un círculo perfecto.

.circulo-avatar { border-radius: 50%; }

En un rectángulo no cuadrado, 50% produce una elipse porque el radio horizontal y el vertical son distintos.

9999px — el truco de la pastilla

Cuando el radio supera la mitad del lado más corto del elemento, las esquinas forman semicírculos perfectos. Un valor absurdamente grande como 9999px garantiza esto sin importar el tamaño del elemento. Es la forma idiomática de crear badges y etiquetas en forma de pastilla.

.badge { border-radius: 9999px; }
.tag   { border-radius: 100vw; } /* alternativa moderna equivalente */

Sintaxis elíptica con /

Permite radios diferentes en el eje horizontal y vertical de cada esquina, produciendo formas de elipse en lugar de arcos de círculo.

/* horizontal / vertical */
.hoja        { border-radius: 50% / 10%; }
.ondulado    { border-radius: 40% 60% / 30% 70%; }
.blob        { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

Esta sintaxis es más avanzada y se usa para formas orgánicas en diseños creativos.

Ejemplo realista

/* Sistema de tarjetas */
.tarjeta             { border-radius: 12px; }
.tarjeta-flush-bottom { border-radius: 12px 12px 0 0; } /* solo arriba */

/* Avatar circular */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden; /* recorta la imagen al círculo */
}

/* Badge / etiqueta */
.badge {
  border-radius: 9999px;
  padding: 2px 10px;
}

Cuándo usarlo

Notas, gotchas e interacción

• border-radius recorta también el fondo y el borde. Si el elemento tiene un border visible, las esquinas del borde también se redondean. Si tiene background-color o background-image, el fondo se recorta en las esquinas.
• overflow: visible (default) no recorta el contenido. Si el contenido de un elemento con border-radius es más grande que la caja, el contenido se desbordará fuera del área redondeada. Para que el contenido también respete las esquinas redondeadas, usá overflow: hidden.
• No afecta el layout. El área de clics y el espacio que el elemento ocupa siguen siendo el rectángulo completo, no la forma redondeada. No hay forma de hacer que los clics fuera del área visible no sean detectados solo con border-radius.
• Longhand por esquina en checks. El validador del sandbox de este sitio usa la longhand border-top-left-radius para verificar el radio, que es la forma más robusta en getComputedStyle. Cuando todas las esquinas son iguales, verificar una alcanza.
• 50% en imágenes de fondo. Cuando se combina con background-image, el radio recorta la imagen al círculo/elipse. Es el método estándar para avatares circulares con foto.

Vigente / legacy

border-radius es CSS3 (Baseline widely). Los prefijos -webkit-border-radius y -moz-border-radius fueron necesarios circa 2010-2012 y hoy son legacy. La sintaxis sin prefijos es la correcta para cualquier proyecto que soporte navegadores de los últimos cinco años.