Generador de border-radius CSS
Este 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.
Fuente: css-backgrounds-3, § 4.1, W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties. Actualizado: .
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:
Cómo crear bordes redondeados
- Ajusta un radio común para todas las esquinas o desvincúlalas y define cada esquina por separado, en px o %.
- Para esquinas elípticas, elige por separado el radio horizontal y el vertical e indica el ancho y el alto de la caja.
- Copia la declaración CSS más corta y comprueba qué radios usa realmente el navegador con ese tamaño de caja.
| 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.
Más herramientas CSS: crea sombras con el generador de box-shadow CSS, degradados con el generador de degradados CSS y convierte valores HEX, RGB o HSL con el convertidor de colores.
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.
¿Cómo redondeo solo una esquina?
Ajusta las esquinas por separado y deja las demás en 0. Redondear solo la esquina inferior izquierda da border-radius: 0 0 0 12px, igual que border-bottom-left-radius: 12px.
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: · Principios editoriales
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.
- Comparar dos JSONComparar JSON: encuentra las diferencias entre dos documentos JSON con ruta, valor antiguo y nuevo. El orden de las claves no importa. En el navegador.
- Calcular letra DNI y NIE al instanteCalcular letra DNI online: escribe las 8 cifras y obtén la letra del NIF; también para NIE (X, Y, Z). Comprueba si la letra es correcta. Sin registro.
- Dígito verificador RUT: calcúlalo o valida un RUT chilenoDígito verificador RUT: escribe el número y obtén el dígito (0 a 9 o K) con el cálculo módulo 11 paso a paso, o pega un RUT completo con guion para validarlo.
- Validar CUIT y CUIL: comprobá el dígito o calculalo con el DNIValidar CUIT o CUIL online: pegá las 11 cifras y comprobá el dígito verificador, o escribí el DNI y el sexo y calculá el CUIL con el método módulo 11.
- Dígito de verificación NIT: cálculo del DV paso a pasoDígito de verificación NIT: escribe el NIT o la cédula y obtén el DV con el método de la DIAN (pesos 3, 7, 13, 17…), o pega un NIT con guion para validarlo.