Generador de border-radius CSS
Ajusta el redondeo de todas las esquinas a la vez o de cada una por separado, en píxeles o porcentaje, y si quieres de forma elíptica con radios horizontal y vertical distintos. El generador escribe el valor en su forma válida más corta, muestra las cuatro propiedades individuales y calcula qué radios usa realmente el navegador con el tamaño de tu caja.
Cómo se calcula
Cómo lee el navegador border-radius
La forma abreviada admite de uno a cuatro valores en el orden arriba izquierda, arriba derecha, abajo derecha, abajo izquierda, en el sentido de las agujas del reloj. Los valores que faltan se completan igual que en margin:
| Valor | Significado |
|---|---|
12px | las cuatro esquinas a 12 px |
24px 8px | arriba izquierda y abajo derecha 24 px; arriba derecha y abajo izquierda 8 px |
24px 8px 4px | arriba izquierda 24 px; arriba derecha y abajo izquierda 8 px; abajo derecha 4 px |
40px 10px / 20px 5px | elíptico: radios horizontales antes de la barra y verticales después |
El generador reduce cada entrada a la forma equivalente más corta: 10px 10px 10px 10px queda en 10px y una barra con los mismos valores desaparece.
Porcentajes: ancho y alto por separado
Los porcentajes se refieren al ancho de la caja en horizontal y a su alto en vertical. Por eso 50% convierte un cuadrado en círculo, pero un rectángulo de 240 × 160 px en una elipse de 120 px y 80 px de radio. Para esquinas circulares en un rectángulo, usa píxeles.
Cuando las curvas se solapan
Si dos radios vecinos suman más que el lado que comparten, la especificación del W3C obliga al navegador a reducir todos los radios con el mismo factor f = mín(longitud del lado ÷ suma de los dos radios de ese lado).
Ejemplo «píldora» border-radius: 9999px en un botón de 200 × 40 px: a izquierda y derecha la suma es 9999 + 9999 = 19 998 px frente a 40 px de alto, así que f = 40 ÷ 19 998 ≈ 0,002. Cada esquina recibe 9999 × f = 20 px, justo la mitad del alto: los extremos son semicírculos. En «Radios usados» ves estos valores para tu caja.
Preguntas frecuentes
¿Cómo hago un círculo con CSS?
Aplica border-radius: 50% a un elemento cuadrado. En un rectángulo, el 50 % da una elipse; para extremos redondeados (forma de píldora), usa un valor en píxeles muy grande como 9999px.
¿Qué significa la barra en border-radius?
Separa los radios horizontales de los verticales. 40px / 20px redondea cada esquina como un cuarto de elipse de 40 px de ancho y 20 px de alto. Con hasta cuatro valores a cada lado, son ocho valores en total.
¿Por qué el redondeo es menor de lo indicado?
Porque las curvas se solaparían. El navegador reduce entonces todos los radios en la misma proporción, incluso las esquinas que habrían cabido solas. El generador muestra el factor y los radios que se usan de verdad.
¿En qué orden van los cuatro valores?
Arriba izquierda, arriba derecha, abajo derecha, abajo izquierda: en el sentido de las agujas del reloj. Las propiedades individuales son border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.
Fuentes y base legal
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Última actualización:
Herramientas relacionadas
- Generador de box-shadow CSSCrea sombras CSS con controles: varias sombras, desplazamiento, desenfoque, expansión, color con transparencia, inset y plantillas. Vista previa y CSS listo.
- Generador de degradados CSSCrea degradados CSS: lineales, radiales o cónicos, con los puntos de color que quieras, ángulo y color de respaldo. Vista previa y CSS listo para copiar.
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Cuál es mi resolución de pantallaDescubre al instante tu resolución de pantalla, píxeles físicos, viewport, devicePixelRatio, relación de aspecto y breakpoint CSS. En vivo, en tu navegador.
- Cuál es mi user agentDescubre tu cadena de user agent y detecta navegador, versión, motor, SO y tipo de dispositivo, con Client Hints. Analiza cualquier otra. Local.