Generador CSS Border Radius

Entender la abreviatura de border-radius

La propiedad CSS border-radius está definida en el W3C CSS Backgrounds and Borders Module Level 3. Su forma abreviada acepta hasta cuatro valores para las esquinas circulares y hasta ocho (separados por una barra) para las esquinas elípticas. El orden de las esquinas es fijo: superior izquierda, superior derecha, inferior derecha, inferior izquierda, en sentido horario desde la superior izquierda, exactamente como leerías la esfera de un reloj. La especificación es inequívoca: «Si se omite la inferior izquierda, es igual que la superior derecha. Si se omite la inferior derecha, es igual que la superior izquierda. Si se omite la superior derecha, es igual que la superior izquierda.»

Las cuatro formas largas por esquina te permiten apuntar a una sola esquina sin escribir las demás: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Cada una acepta un valor (una esquina circular) o dos valores (una x y elíptica).

Píxeles, porcentajes y el truco del 50 %

La especificación del W3C define cómo se resuelven los porcentajes: «Los porcentajes del radio horizontal se refieren al ancho de la caja de borde, mientras que los porcentajes del radio vertical se refieren a la altura de la caja de borde.» Esto produce una consecuencia importante: border-radius: 50% crea un círculo perfecto solo cuando el elemento es cuadrado. En un rectángulo de 200×100, un 50 % en cada esquina produce una elipse: un radio horizontal de 100px (la mitad del ancho) y un radio vertical de 50px (la mitad de la altura).

Cuándo recurrir a cada unidad:

• Píxeles (px): esquinas precisas y fijas que no escalan con el elemento. Las mejores para botones, tarjetas y componentes de interfaz coherentes.
• Porcentajes (%): escalan con el elemento. Usa el 50 % para círculos o elipses en componentes que cambian de forma.
• em / rem: escalan con el tamaño de fuente. Útiles para botones cuyo radio de esquina debería crecer con el texto que contienen.
• calc(): mezcla unidades, p. ej. calc(8px + 0.5em) para una base que escala sutilmente con el tamaño del texto.

El truco de la píldora

Poner un border-radius mayor que la mitad del lado más corto del elemento fija cada esquina a un semicírculo verdadero, produciendo una forma de píldora con independencia del ancho. La convención es border-radius: 9999px, cualquier número lo bastante grande como para que ningún elemento realista lo supere jamás. Por esto la .rounded-pill de Bootstrap usa 50rem (~800px) y la rounded-full de Tailwind v4 se resuelve como calc(infinity * 1px): ambas codifican la misma idea, que un número mayor que la caja garantiza una píldora en cualquier elemento.

Esquinas elípticas y formas de blob orgánicas

La forma de ocho valores (con barra) es lo que usan los diseñadores para crear formas de «blob» orgánicas y asimétricas que se han hecho populares para las ilustraciones hero y los fondos decorativos. Cada esquina recibe un radio horizontal diferente antes de la barra y un radio vertical diferente después, produciendo curvas que no están limitadas a arcos circulares.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Variantes de propiedad lógica para diseños RTL

El CSS Logical Properties Module Level 1 introduce cuatro formas largas lógicas que se adaptan a la dirección de escritura:

• border-start-start-radius: superior izquierda en el inglés LTR, superior derecha en el árabe / hebreo RTL.
• border-start-end-radius: superior derecha en LTR, superior izquierda en RTL.
• border-end-start-radius: inferior izquierda en LTR, inferior derecha en RTL.
• border-end-end-radius: inferior derecha en LTR, inferior izquierda en RTL.

Útil cuando el mismo componente debe verse simétrico en ambas direcciones de lectura: la esquina de la «boca» de un bocadillo de chat, por ejemplo, debería estar siempre del lado del hablante, no siempre a la izquierda. Ten en cuenta que todavía no hay una abreviatura de propiedad lógica, así que tienes que escribir las cuatro formas largas por separado para optar por esquinas conscientes del RTL.

Borde exterior frente a interior cuando el borde es grueso

El radio se aplica al borde exterior. El navegador calcula automáticamente un radio concéntrico más pequeño para el borde interior, de modo que el borde no parezca discontinuo en la esquina. Consecuencia práctica: un radio exterior de 16px con un borde de 2px tendrá un radio interior de alrededor de 14px, así que el borde parece un marco de grosor constante en todo su recorrido. Pon background-clip: padding-box si quieres que el color de fondo se detenga en el borde interior en lugar de filtrarse por debajo de él.

Convenciones prácticas de tamaño

Errores comunes

1. Usar el 50 % en un elemento no cuadrado y esperar un círculo. Un 50 % en un rectángulo es una elipse. O bien mantienes el elemento cuadrado o usas border-radius: 9999px para una píldora verdadera.
2. Olvidar el orden de las esquinas. La abreviatura va en sentido horario desde la superior izquierda (TL TR BR BL). La forma de dos valores establece pares diagonalmente opuestos, lo cual es fácil de recordar mal.
3. Valores negativos. La especificación los define como inválidos; el navegador los fija silenciosamente a cero. Si una esquina no se redondea como esperas, comprueba que no hayas restado por accidente.
4. Padres redondeados que dejan escapar a los hijos. Un elemento con border-radius no recorta a sus descendientes por defecto. Añade overflow: hidden al padre si quieres que los hijos se detengan en el borde redondeado.
5. Propiedades por esquina antes de la abreviatura. La cascada de CSS es sensible al orden, así que border-top-left-radius seguido de border-radius sobrescribe el valor por esquina. Pon la abreviatura primero y luego las anulaciones por esquina.
6. Mezclar % y px de forma torpe. Poner un radio del 50 % en una esquina y 12px en otra rara vez produce lo que los diseñadores esperan. Mantente en una sola unidad por elemento.
7. Las tablas y border-collapse: collapse. La referencia de MDN es explícita: border-radius no se aplica a los elementos de tabla ni de tabla en línea cuando los bordes están colapsados. O bien cambias a border-collapse: separate o aplicas el radio a un elemento envoltorio.

Más preguntas frecuentes

¿Por qué mi imagen no tiene las esquinas redondeadas?

Si la imagen está dentro de un contenedor con border-radius pero las esquinas siguen pareciendo cuadradas, el padre no está recortando. Añade overflow: hidden al padre. Como alternativa, aplica border-radius directamente al elemento <img>; las imágenes responden a la propiedad de forma nativa.

¿Afecta border-radius al rendimiento?

De forma insignificante. Los navegadores modernos renderizan las esquinas redondeadas en la GPU y el coste es esencialmente idéntico al de un borde cuadrado. La excepción es animar border-radius en un elemento grande en cada fotograma (puede desencadenar la recomposición de capas), pero las esquinas redondeadas estáticas son prácticamente gratis.

¿Funcionará esto en los navegadores antiguos?

Sí. Todos los navegadores desde IE9 admiten border-radius sin prefijo. Las variantes de propiedad lógica (border-start-start-radius, etc.) son más nuevas: Chrome 89+, Firefox 66+, Safari 15+. Para los navegadores antiguos que necesiten el comportamiento lógico, escribe un pequeño bloque @supports como alternativa.

¿Cómo hago un bocadillo de chat?

Usa las cuatro formas largas por esquina para redondear tres esquinas y dejar la cuarta pequeña o afilada. Esa es la «boca» que apunta al hablante. Por ejemplo, un bocadillo de mensaje saliente: border-radius: 16px 16px 4px 16px;. Para los bocadillos conscientes del RTL, cambia a las formas largas lógicas para que la boca se voltee con la dirección de lectura.

¿Por qué mis botones de píldora se ven irregulares con distintos anchos de elemento?

Una píldora fija cada esquina a la mitad del lado más corto, que es la altura en un botón típico. Así que los botones más cortos obtienen radios más pequeños y los más altos obtienen radios más grandes. Ese es el comportamiento deseado. Si quieres un radio constante en cada botón con independencia del tamaño, usa un valor de píxel fijo (p. ej. border-radius: 24px) en lugar del truco de la píldora.

¿Puedo copiar el CSS directamente en proyectos de Tailwind / Bootstrap?

Sí, el CSS generado es sintaxis estándar simple, sin dependencias de preprocesador ni de framework. En Tailwind v4 también puedes escribir valores arbitrarios como utilidades (rounded-[12px] o rounded-[30%/70%]) si prefieres mantenerte en el estilo de clases de utilidad.