Generador de border-radius CSS

Un generador que muestra las esquinas tal como se dibujan en una caja real

El generador de border-radius CSS crea el código border-radius a partir del radio de las cuatro esquinas y muestra cómo se dibuja ese valor en una caja de tamaño real. Si a una tarjeta de 320px por 200px le aplicas border-radius: 16px;, cada esquina se recorta como un cuarto de círculo de 16px de radio. Si defines por separado el radio horizontal y el vertical, obtienes esquinas elípticas con barra (/), como border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.

Al escribir un número en el campo de una esquina o arrastrar el control de un carril del escenario, la forma y el código cambian a la vez. Cuando un radio es tan grande que las curvas vecinas se solapan, el navegador reduce todos los radios en la misma proporción. Esta herramienta muestra esos valores reducidos con guías y barras de comprobación por lado, y con un solo clic en «Usar los valores reducidos» los campos pasan a coincidir con lo que se dibuja. También muestra el mismo valor en tamaños de botón, etiqueta, campo, tarjeta, foto y avatar, y calcula el radio interior para una foto dentro de una tarjeta.

Por qué falla elegir solo un número

El mismo 24px da una píldora con extremos semicirculares en un botón de 44px de alto, pero solo unas esquinas ligeramente redondeadas en una tarjeta grande. Los porcentajes se calculan sobre el ancho y el alto de la caja por separado, así que si la caja no es cuadrada las esquinas son elípticas, no circulares. Por eso el radio depende del tamaño de la caja a la que se aplica, y por eso esta herramienta junta el tamaño de la caja con vistas previas de elementos reales.

• Al definir los niveles de esquina de un sistema de diseño: antes de fijar valores como 8px para botones y 16px para tarjetas, compara en una sola pantalla cómo se ve el mismo valor en un botón, una etiqueta, una tarjeta y una foto.
• Al pasar a código los valores de un diseño: introduce el tamaño de caja de la maqueta y ajusta las esquinas, y sabrás si el navegador reduce los radios antes de pegar el código.
• Al crear un botón píldora o una foto redonda: comprueba en qué cajas 9999px y 50% dan la misma forma y en cuáles no.
• Si necesitas una forma orgánica como una gota o un blob: ajustar a mano ocho valores con barra es difícil. Parte de un ejemplo y afínalo con los controles.
• Al poner una foto o un botón dentro de una tarjeta: si el elemento interior usa el mismo valor que el exterior, el espacio parece más grueso en las esquinas. Si indicas el margen, la herramienta da el radio interior correcto.

Cómo se usa

1. En «Elige una forma», haz clic en la más parecida, o escribe el ancho y el alto de la caja que vas a usar de verdad.
2. Elige la unidad (px o %) y el modo de radio (circular o elíptico). Con el modo elíptico, cada esquina tiene un campo horizontal (↔) y otro vertical (↕), y a izquierda y derecha del escenario aparecen carriles para el radio vertical.
3. Escribe números en los cuatro campos de esquina o arrastra los controles de los carriles. Con un control enfocado, las flechas cambian el valor de 1 en 1, y de 10 en 10 con Mayús. Si activas «Las cuatro esquinas a la vez», al cambiar una esquina se mueven las demás.
4. Cuando una barra de comprobación se pone naranja, la suma de los radios de ese lado supera su longitud y el navegador lo dibuja reducido. Si necesitas los números tal como se dibujan, pulsa «Usar los valores reducidos».
5. Con «Ver en tamaño real» comprueba otros elementos y llévate el código con «Copiar CSS». Puedes elegir entre la forma abreviada y las propiedades por esquina, y entre px y rem; «Copiar enlace» guarda la configuración actual en la dirección.

Orden de los valores y forma abreviada

Los valores de border-radius empiezan en la esquina superior izquierda y siguen en sentido horario: superior derecha, inferior derecha, inferior izquierda. Si escribes menos valores, la esquina que falta copia una que ya escribiste. Si falta la inferior izquierda, es igual que la superior derecha; si falta la inferior derecha, es igual que la superior izquierda; y si falta también la superior derecha, es igual que la superior izquierda.

Con dos valores, las parejas son diagonales, no arriba y abajo. Los valores antes de la barra son radios horizontales, los de después son radios verticales, y ambas listas siguen las mismas reglas de abreviación. Para cambiar una sola esquina se usan border-top-left-radius, border-top-right-radius, border-bottom-right-radius o border-bottom-left-radius; ahí el valor horizontal y el vertical se separan con un espacio, sin barra, como en 40px 20px. El código «Abreviado» de esta herramienta comprime los valores iguales todo lo posible, y «Por esquina» da las cuatro propiedades por separado.

Cómo se dibujan de forma distinta px y %

Un radio en px mide lo mismo sea cual sea el tamaño de la caja. Un radio en % se calcula sobre el ancho de la caja del borde para el radio horizontal y sobre su alto para el vertical. Así, el mismo 10% en una tarjeta de 300px por 180px da una esquina elíptica de 30px en horizontal y 18px en vertical. La tabla siguiente muestra los radios (horizontal × vertical) que el navegador dibuja de verdad cuando el mismo valor se aplica a tres tamaños.

Si quieres la misma redondez en elementos de distinto tamaño, lo adecuado es px; si quieres una curva proporcional a la caja, usa %. Cuando cambias de unidad en esta herramienta, los valores se recalculan para que la forma que ves se mantenga. Al pasar de px a % en una caja no cuadrada, el valor horizontal y el vertical difieren, así que se convierte en un radio elíptico.

Por qué un valor mayor no redondea más

La especificación compara, para cada lado, la suma de los radios de las dos esquinas que lo tocan con la longitud del lado. En los lados superior e inferior compara los dos radios horizontales con el ancho, y en los lados izquierdo y derecho los dos radios verticales con el alto. Toma el menor valor de «longitud del lado ÷ suma de radios» entre los cuatro lados y llámalo f. Si f es menor que 1, todos los radios de las esquinas se multiplican por f. Un cuarto de círculo sigue siendo un cuarto de círculo y el radio grande sigue siendo mayor que el pequeño, pero las esquinas que ya eran pequeñas también se reducen.

En la tercera fila, el radio grande de la esquina superior izquierda reduce hasta 6.25px las otras tres esquinas que fijaste en 10px. Para conservar exactas las esquinas pequeñas, baja el radio grande hasta que quepa en la longitud del lado. El 9999px que se usa a menudo en botones píldora aprovecha esta regla: el radio se reduce a la mitad del lado más corto, así que los extremos son siempre semicírculos, cambie lo que cambie el alto.

Esquinas elípticas y la barra

Una esquina es un cuarto de elipse con un radio horizontal y otro vertical. Si los dos son iguales, es un cuarto de círculo; si difieren, la curva se alarga hacia un lado. border-radius: 50% / 60% 60% 40% 40%; usa la mitad del ancho en horizontal en todas las esquinas, y en vertical el 60% del alto en las dos esquinas de arriba y el 40% en las de abajo, lo que da un huevo más alargado por arriba. Si los ocho valores horizontales y verticales son distintos, sale una forma como dibujada a mano, parecida a un blob.

Si el radio horizontal o el vertical es 0, esa esquina se dibuja recta, sin curva. Pero el valor distinto de 0 sigue contando en la suma de ese lado, así que puede reducir las otras esquinas. Al dibujarlo en Chrome se comprueba que las demás esquinas se reducen tal como dice la especificación. Los radios no pueden ser negativos, y una declaración con un valor negativo se ignora.

Radio del elemento interior: exterior − margen

Si pones una foto dentro de una tarjeta con el mismo margen por todos los lados, la esquina de la foto debe curvarse esa cantidad más hacia dentro para que el espacio entre las dos curvas se vea uniforme. La especificación deduce las curvas interiores de una caja de la misma manera. El radio del borde del relleno (padding edge) es el radio exterior menos el grosor del borde, el radio del área de contenido es ese valor menos el padding, y si el resultado es menor que 0, se queda en 0.

Si el elemento interior recibe el mismo valor que el exterior, el espacio en las esquinas se vuelve más grueso que a lo largo de los lados, y la foto parece empujada hacia dentro. En «Ajustar las esquinas interiores», más arriba, puedes comparar los dos casos uno al lado del otro. Aunque el radio exterior esté definido en %, el valor interior se da en px, restado del radio que se dibuja.

Cuando la foto interior sobresale por las esquinas

Dar un radio a la caja padre no recorta por sí solo a los elementos hijos. Según la especificación, el fondo se recorta siguiendo la curva, pero para que un hijo no salga de la curva hay que poner el overflow del padre en un valor distinto de visible (hidden o clip). El recorte sigue entonces la curva interior del borde. También puedes dar un radio a la propia foto, porque el contenido de un elemento reemplazado como img se recorta siguiendo su propia curva.

Un radio también reduce el área en la que se puede hacer clic. Los eventos de puntero se recortan igualmente por el borde redondeado, así que en un botón de 44 × 44px con 50% solo se puede pulsar sobre el área de un círculo, un 78.5% aproximado del cuadrado. La especificación también aconseja que, al usar radios grandes, dejes ancho y alto suficientes para respetar el tamaño táctil mínimo recomendado.

Valores de las formas más usadas

Son los doce valores de «Elige una forma». Para obtener la misma forma hace falta también el tamaño de la caja, y los valores en % en concreto cambian de forma si cambian las proporciones de la caja.

Compatibilidad con navegadores y la nueva propiedad corner-shape

Todos los navegadores principales admiten border-radius desde hace mucho, así que puedes usarlo sin prefijo. En páginas escritas de derecha a izquierda o en vertical, las propiedades lógicas como border-start-start-radius mueven la esquina según la dirección de escritura. corner-shape, del borrador del editor de CSS Borders 4, cambia la forma de la curva dentro del área fijada por el radio a una de estas: round, squircle, bevel, scoop, notch, square o superellipse(). Todavía es experimental y solo se ve en Chrome 139 y posteriores, y la vista previa de esta herramienta solo dibuja la curva redonda de border-radius.

Errores frecuentes

• Pensar que el orden es antihorario: los cuatro valores van superior izquierda → superior derecha → inferior derecha → inferior izquierda, en sentido horario.
• Leer dos valores como arriba y abajo: en 16px 8px, la superior izquierda y la inferior derecha son 16px, y la superior derecha y la inferior izquierda son 8px. Para redondear solo la parte de arriba, usa 16px 16px 0 0.
• Usar 50% en un rectángulo esperando una píldora: si el ancho y el alto difieren, 50% da una elipse. Para una píldora con solo los extremos semicirculares, usa un valor en px de al menos la mitad del alto, o 9999px.
• Poner una barra en cada esquina: con dos barras, como en 10px / 20px 30px / 40px, se ignora toda la declaración. Usa una sola barra entre la lista de valores horizontales y la de verticales.
• Dar radio solo al padre y dejar que la foto sobresalga: pon overflow: hidden en el padre o da también un radio a la foto.
• Dar al elemento interior el mismo valor que al exterior: el espacio se engrosa en las esquinas. Usa el radio exterior menos el margen.
• Suponer una única referencia para el radio en %: el radio horizontal se calcula sobre el ancho y el vertical sobre el alto, así que en una caja no cuadrada el mismo % da dos longitudes distintas.

Límites y avisos

• Las unidades de entrada son px y %. rem es un formato de salida que muestra el valor en px dividido por un tamaño de fuente raíz de 16px; no se admiten em, vw ni otras unidades.
• Los radios llegan hasta un decimal, de 0 a 9999 en px y de 0 a 100 en %, y la caja mide de 40 a 800px de ancho y de 40 a 600px de alto. Una caja más grande que el escenario se muestra reducida, y la escala aparece arriba a la izquierda del escenario.
• El tamaño de la caja se entiende incluyendo el borde. Si un elemento real tiene borde o padding y box-sizing es content-box, el tamaño sobre el que se calculan los radios en % es mayor que el ancho y el alto que has introducido.
• La especificación permite que el navegador reduzca aún más un radio cuando una curva chocaría con algo como una barra de desplazamiento. En ese caso el resultado puede ser menor que el cálculo de esta herramienta.
• El radio interior se calcula suponiendo el mismo margen por todos los lados. Si los márgenes laterales difieren de los de arriba y abajo, al radio horizontal hay que restarle los márgenes laterales y al vertical los de arriba y abajo.
• corner-shape no tiene vista previa. La suavidad del borde de una curva puede variar un poco según la escala de la pantalla y la densidad de píxeles del dispositivo.

Fecha de referencia W3C CSS Backgrounds and Borders Module Level 3 (Candidate Recommendation Draft 2024-03-11), CSS Borders and Box Decorations Module Level 4 (Editor's Draft 2026-10-15) y los datos de compatibilidad de MDN (browser-compat-data 8.1.6) se comprobaron en los textos originales el 2026-10-22. Las cifras de las tablas salen del núcleo de cálculo de esta herramienta, y la reducción por solapamiento y el tratamiento de un eje a 0 se contrastaron dibujándolos de verdad en Chromium 151.

Fuentes

• 01W3C: CSS Backgrounds and Borders Module Level 3Candidate Recommendation Draft 2024-03-11. §4.1 orden de los valores, valores omitidos, barra, referencia del %, valores negativos no válidos; §4.2 curvas interiores (exterior − borde); §4.3 recorte siguiendo la curva; §4.5 curvas que se solapan f = min(L/S)
• 02MDN: border-radiusSintaxis y ejemplos, compatibilidad con navegadores (cuatro valores Chrome 4, Firefox 4, Safari 5; valores en % Chrome 8, Firefox 4, Safari 5.1)
• 03W3C CSSWG: CSS Borders and Box Decorations Module Level 4Editor's Draft 2026-10-15. Valores de corner-shape: round, scoop, bevel, notch, square, squircle, superellipse()
• 04MDN: corner-shapeFunción experimental; datos de compatibilidad: Chrome 139, y Firefox y Safari en versiones de prueba
• 05MDN: border-start-start-radiusPropiedad lógica de esquina que sigue la dirección de escritura; datos de compatibilidad: Chrome 89, Firefox 66, Safari 15

Preguntas frecuentes

Herramientas que se usan junto con esta