El generador de border-radius en CSS es una herramienta gratuita que funciona en el navegador y permite crear y previsualizar visualmente los valores de redondeo de las esquinas sin escribir una sola línea de código.
Da forma a cualquier elemento en segundos. Arrastra los controles deslizantes, elige un ajuste preestablecido o escribe valores exactos. La vista previa se actualiza en vivo.
Características clave:
- Radios elípticos controlan los ejes horizontal y vertical de forma independiente, desbloqueando formas más allá de simples esquinas redondeadas
- 10 ajustes preestablecidos que incluyen Píldora, Círculo, Ardilla, Hoja, Boleto, Diamante, Ola y Huevo
- Múltiples formatos de exportación: simple CSS, SCSS, CSS-in-JS y Tailwind configuración
- Esquinas vinculadas o independientes para formas simétricas o totalmente personalizadas
- Deshacer/Rehacer soporte para que puedas experimentar libremente
- Alternar prefijo de proveedor para compatibilidad
-webkit- - Vista previa en vivo con fondos seleccionables (sólido, tablero de ajedrez, cuadrícula) y tipos de contenido (texto, avatar, botón, tarjeta)
El CSS generado está listo para copiar y pegar. Sin registro, sin instalación, sin tonterías.
¿Qué es un generador de radio de borde CSS?
Un generador de border-radius en CSS es una herramienta visual basada en navegador que convierte las entradas de control deslizante, de arrastre o de esquinas numéricas en código CSS (EN) listo para usar.
En lugar de escribir valores a mano, arrastra una esquina, observa cómo se actualiza la forma y copia la declaración border-radius resultante directamente en tu hoja de estilo.
La mayoría de los generadores ofrecen los mismos controles básicos:
- Controles deslizantes individuales o campos numéricos para cada esquina
- Un controlador de arrastre que puedes arrastrar directamente sobre la forma de vista previa
- Un panel de código en vivo que muestra la taquigrafía generada a medida que te mueves.
La gente recurre a uno principalmente para el mismo puñado de trabajos. Redondear el diseño de una tarjeta, suavizar un botón, darle forma a un avatar en un círculo o crear un panel estilo burbuja inusual para una sección de héroe.
Los sistemas de diseño tienden a formalizar esta decisión en lugar de dejarla en manos de conjeturas. Material Design de Google es un buen ejemplo. Asigna pasos de esquina fijos a tipos de componentes específicos en lugar de permitir que cada pantalla elija su propio número. (EN)
¿Cómo funciona la propiedad Border-Radius en CSS?
La propiedad border-radius (EN) redondea las esquinas de cualquier cuadro, desde un div simple hasta un botón con estilo completo. Funciona independientemente de que el elemento tenga un borde visible o no.
Se aplica al modelo de caja en sí, por lo que afecta el Edge exterior del relleno y el fondo. Eso se aplica incluso a elementos creados directamente a partir del marcado HTML (EN) sin envoltorio adicional.
.card {
border-radius: 12px;
}
.avatar {
border-radius: 50%;
}Sintaxis abreviada y propiedades individuales
border-radius es una abreviatura de cuatro propiedades escritas a mano separadas, una por esquina.
Rara vez es necesario escribir los cuatro a mano, pero conocer el mapeo es importante una vez que un diseño requiere asimetría.
| Valores dados | Esquinas afectadas | Ejemplo |
|---|---|---|
| un valor | Las cuatro esquinas por igual | border-radius: 12px; |
| Dos valores | Arriba a la izquierda/abajo a la derecha, luego arriba a la derecha/abajo a la izquierda | border-radius: 12px 4px; |
| Cuatro valores | Arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda en orden | border-radius: 12px 4px 12px 4px; |
Los cuatro equivalentes escritos a mano, border-top-left-radius y los otros tres, aceptan exactamente los mismos valores. Son lo que un generador escribe detrás de escena cuando necesita apuntar solo a una esquina.
/* shorthand */
border-radius: 12px 4px 12px 4px;
/* the same thing, longhand */
border-top-left-radius: 12px;
border-top-right-radius: 4px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 4px;Valores de radio de cuatro esquinas
El orden de las esquinas importa:
- La parte superior izquierda siempre es la primera
- Arriba a la derecha y abajo a la derecha siguen en el sentido de las agujas del reloj
- La parte inferior izquierda cierra el ciclo.
Si se equivoca en ese orden en una declaración escrita a mano, el redondeo caerá en el lado equivocado de la casilla. Es uno de los errores silenciosos más comunes en una hoja de estilo.
Esta sintaxis de esquina exacta se ha mantenido estable durante mucho tiempo. La propiedad alcanzó la línea base recién disponible en julio de 2015 y la línea base ampliamente disponible en enero de 2018, según el conjunto de datos de características web detrás de la tabla de compatibilidad de MDN (EN).
Un generador evita por completo la cuestión del pedido, ya que cada esquina tiene su propio control etiquetado y la herramienta ensambla la taquigrafía por usted.
¿Qué unidades admite Border-Radius?
Border-radius acepta un valor de porcentaje de longitud, lo que en la práctica significa que aparecen cuatro opciones reales en el uso diario: píxeles, porcentajes, em y rem.
El comportamiento de la unidad difiere más de lo que parece:
- px proporciona un tamaño de esquina fijo que nunca cambia con las dimensiones del propio elemento.
- % calcula la esquina como una fracción del ancho y alto del propio elemento, que es lo que convierte un div cuadrado en un círculo perfecto al 50%
- em escala el radio con respecto al tamaño de fuente del elemento
- rem se escala según el tamaño de fuente raíz, por lo que los componentes anidados permanecen consistentes incluso cuando un padre cambia su propio tamaño de letra
Elegir entre los dos últimos surge con tanta frecuencia que vale la pena comprender la diferencia entre em y rem (EN) antes de bloquear un valor en un sistema de diseño.
Los valores porcentuales son los que hacen que el radio de una esquina responda genuinamente. La forma se vuelve a calcular automáticamente como parte de un enfoque más amplio para el diseño responsivo (EN), sin reescritura de consultas de medios en cada punto de interrupción.
Los sistemas de diseño de producción tienden a limitar estas opciones con números reales en lugar de elegir un valor por pantalla. La escala de forma de Material Design 3 (EN), por ejemplo, especifica 4dp para su paso de esquina extra pequeño y 28dp para superficies extra grandes, con varios pasos fijos en el medio.
¿Cómo funciona el radio de borde elíptico?
El radio de borde elíptico utiliza una barra dentro del valor para establecer un radio horizontal y vertical diferente para la misma esquina. Un radio plano sólo produce un único arco circular.
Pares de radios horizontales y verticales
La sintaxis se divide en dos mitades separadas por una barra diagonal, primero los radios horizontales y después los radios verticales.
/* horizontal radius 40px, vertical radius 20px, every corner */
border-radius: 40px / 20px;
/* four corners, each with its own horizontal / vertical pair */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Un solo radio circular utiliza un número para ambos ejes. Una elíptica permite que los dos ejes se diferencien, lo que estira la curva en lugar de mantenerla perfectamente redonda.
Las esquinas circulares parecen idénticas desde todos los ángulos y funcionan bien para avatares, insignias y botones.
Las esquinas elípticas se estiran de manera desigual y se adaptan a componentes más anchos, como etiquetas en forma de píldora o paneles asimétricos.
Un generador que expone dos controles deslizantes por esquina, en lugar de uno, es la forma rápida de construir este emparejamiento sin hacer los cálculos de sintaxis de barra a mano.
Formas de superelipse y formas orgánicas
Los íconos de aplicaciones iOS de Apple (EN) no son simples rectángulos redondeados. Utilizan una superelipse, comúnmente llamada squircle. El radio de la esquina se sitúa aproximadamente en el 22 por ciento del ancho del icono, con una curva suavizada continua en lugar de un arco circular simple.
El radio de borde estándar no puede reproducir esa curva continua por sí solo, ya que solo dibuja arcos circulares o elípticos.
El Grupo de Trabajo CSS ha estado abordando esa brecha directamente. Una nueva propiedad de forma de esquina (EN) con una función superelipse() se resolvió en el borrador del CSS Módulo de Fronteras Nivel 4. Agrega palabras clave como squircle, bisel, pala y muesca que remodelan la curva dentro de un cuadro de radio de borde existente. MDN (EN) actualmente lo enumera como disponibilidad limitada, aún no es seguro confiar en él sin un respaldo.
.icon {
border-radius: 22%;
corner-shape: squircle; /* limited availability, needs a fallback */
}Hasta que eso llegue a todas partes, los equipos que persiguen una verdadera masa o forma orgánica generalmente buscan una de dos soluciones en lugar de acumular más valores de radio de borde.
Una ruta construye la forma como una ruta SVG (EN), lo que brinda control total sobre cada punto de la curva.
El otro lo mantiene en plano CSS a través de un generador de clip-path, cortando una silueta irregular de una caja rectangular normal.
Compatibilidad del navegador con radio de borde y prefijos de proveedores
Border-radius es una de las propiedades CSS3 más compatibles disponibles en la actualidad, y no queda ningún vacío significativo en la cobertura de los navegadores modernos.
Soporte actual del navegador
En este momento, el apoyo ha sido sólido durante más de una década.
| Navegador | Soporte sin prefijos desde |
|---|---|
| Chrome | Versión 4 |
| Firefox | Versión 4 |
| Safari | Versión 5 |
| Edge | Versión 12 (primera versión) |
Los datos Can I Use (EN), extraídos de StatCounter GlobalStats en agosto de 2026, sitúan el soporte global para valores porcentuales de radio de borde en 97.26% del tráfico de navegador rastreado en todo el mundo.
Ese nivel de compatibilidad entre navegadores (EN) es la razón por la que casi ningún generador hoy en día se molesta en ofrecer un modo alternativo de navegador heredado de forma predeterminada.
Historial de prefijos de proveedores
Existen tres eras distintas:
- Era Webkit: Se necesitan las primeras compilaciones de Safari y Chrome -webkit-border-radius
- Era Mozilla: Se necesitan las primeras versiones de Firefox -moz-border-radius
- Era moderna: todos los navegadores actuales aceptan la propiedad sin prefijo, sin necesidad de ningún prefijo
Un generador que todavía genera ambas líneas con prefijo de forma predeterminada está rellenando tu hoja de estilo con código muerto que ningún navegador leerá jamás.
¿Cómo se utiliza un generador de radio de borde CSS?
El uso de uno sigue la misma secuencia corta independientemente de qué herramienta específica abra.
- Elige una unidad (px, % o em) y decida si las esquinas permanecen vinculadas o se mueven de forma independiente.
- Ajusta cada esquina con su control deslizante o cambie a la pestaña Radios verticales para obtener una forma elíptica. El diagrama de esquina muestra qué valor se asigna a qué esquina.
- Mira la vista previa en vivo para confirmar que la forma renderizada coincide con lo que imaginaste. Los números por sí solos pueden ser engañosos en tamaños pequeños, así que cambia el avatar, el botón o el contenido de la tarjeta para compararlo con algo real.
- Copia el resultado en el formato que utiliza tu proyecto: CSS, SCSS, CSS-in-JS o Tailwind.
El contenido de la vista previa importa más de lo que la gente espera. Un radio basado en porcentaje se ve completamente diferente en un avatar cuadrado que en una tarjeta ancha.
Este flujo de trabajo aparece constantemente en el trabajo ordinario de diseño de tarjetas (EN), donde las cuatro esquinas a menudo necesitan un tratamiento ligeramente diferente para que coincida con el lenguaje visual de una marca.
Un hábito que vale la pena desarrollar: ejecutar el código exportado a través de un minificador CSS (EN) antes de enviarlo a producción. Eso captura espacios en blanco adicionales y líneas con prefijo sobrantes.
Comparando CSS herramientas generadoras de radio de borde
Las herramientas generadoras se dividen en algunas categorías reconocibles una vez que las alineas una al lado de la otra.
| Tipo de herramienta | Método de entrada | Exportación típica | Costo |
|---|---|---|---|
| Generadores web con control de arrastre (por ejemplo, Fancy Border Radius Generator) | Arrastra directo sobre la forma. | CSS taquigrafía | Gratis |
| Generadores web basados en controles deslizantes | Controles deslizantes numéricos por esquina | CSS, a veces SCSS | Gratis |
| Herramientas de desarrollo del navegador | Haz clic y arrastre el valor en línea | Ninguno, edita estilos en vivo | Integrado |
| software de diseño | Campo de radio de esquina en la forma | Traducción manual a CSS | Gratis o de pago |
Chrome (EN) y Firefox DevTools te permiten hacer clic en un valor de radio de borde en el panel de reglas y arrastrarlo horizontalmente para cambiarlo. Esto cubre ajustes rápidos y únicos sin abrir ninguna herramienta separada.
El software de diseño está un paso aparte del resto. Si ya está redondeando las esquinas dentro de Figma (EN), el valor del radio que se muestra allí todavía debe escribirse en CSS a mano o leerse durante la transferencia. No se exporta automáticamente como una declaración utilizable.
Muchos equipos mantienen una pequeña pila de herramientas de un solo propósito en lugar de una aplicación que lo hace todo. Un generador de radio se combina naturalmente con algo como un CSS generador de botones (EN) para el resto del estilo de un componente.
La mayoría de los desarrolladores todavía se inclinan por el CSS escrito a mano en lugar de cualquier paso visual primero. La encuesta Estado de CSS 2024 (EN), realizada por Devographics, encontró que el 60.9% de los encuestados implementan sus propios diseños directamente en CSS. Sólo el 34.6% diseña en una aplicación separada antes de traducirla a código.
Generador o Manual CSS: Cuál Usar
Un generador de radio de borde CSS se gana la vida en esquinas asimétricas de valores múltiples.
El CSS escrito a mano sigue ganando en los casos más simples, donde escribir un valor recordado es más rápido que abrir una pestaña del navegador.
Manual CSS funciona mejor cuando:
- El diseño requiere un radio uniforme en cada esquina.
- El valor exacto ya existe en una guía de estilo o archivo token.
- El cambio es una edición rápida de una línea dentro de una regla existente.
Un generador gana su lugar cuando:
- Las esquinas necesitan valores diferentes en cada lado
- Están involucrados valores de sintaxis elíptica o de barra diagonal.
- Es necesario ver la forma antes de que un número se convierta en código.
Los sistemas de diseño de producción tienden a eludir todo el debate al encerrar los valores en tokens de antemano.
El sistema de diseño (EN) Polaris de Shopify incluye una escala de token de radio de borde público con pasos con nombre que comienzan en 0px y suben hasta 2px y 4px. Nadie en el equipo elige un número por sensación o busca un control deslizante en mitad de la construcción.
Una vez que existen los tokens, la verdadera elección deja de ser el generador versus la entrada manual. Se convierte en token versus improvisación.
Formatos de exportación: CSS, SCSS y clases de utilidad
El formato de exportación correcto depende de lo que el resto del código base ya espera, no de qué botón tiene la etiqueta "copiar".
CSS y salida SCSS
La salida simple CSS cae directamente en una hoja de estilo sin necesidad de realizar pasos adicionales.
La salida SCSS difiere en algunas formas concretas:
- Los valores se pueden almacenar como variables y reutilizar entre componentes.
- Un mixin puede generar las cuatro propiedades de las esquinas a partir de una sola entrada
- El anidamiento mantiene las reglas de las esquinas en el ámbito de su selector principal
Los equipos que ya ejecutan un proceso de compilación de Sass obtienen un beneficio real de la producción SCSS.
Los equipos sin uno simplemente heredan una sintaxis adicional y, de todos modos, compilarán directamente de nuevo al mismo formato CSS.
Salida en clases utilitarias
Los marcos de utilidad primero convierten un valor de radio de borde en un nombre de clase en lugar de una declaración sin formato.
| Tailwind Clase | rem Valor | Equivalente en píxeles |
|---|---|---|
| redondeado-xs | 0.125rem | 2px |
| md redondeado | 0.375rem | 6px |
| redondeado-xl | 0.75rem | 12px |
| redondeado-4xl | 2rem | 32px |
redondeado completo se encuentra completamente fuera de esa escala numérica. La propia documentación de Tailwind (EN) lo define como calc(infinity * 1px), por lo que la forma de una píldora se mantiene en cualquier tamaño de elemento sin un número fijo detrás.
Cualquiera que elija un enfoque de clase de utilidad en realidad está eligiendo entre Tailwind (EN) y Bootstrap (EN) convenciones de nomenclatura. Ambos marcos incluyen su propia escala de redondeo en lugar de valores de radio de borde sin procesar.
Un generador que solo produce CSS en bruto es un peso muerto en un proyecto estandarizado en torno a cualquiera de los dos. El verdadero trabajo consiste en mapear manualmente un valor de píxel al nombre de clase más cercano.
Cuando no se aplica un generador de radio de borde
Border-radius tiene un techo matemático estricto que ningún generador, manija de arrastre o control deslizante puede superar.
Formas complejas u orgánicas
La CSS Especificación de fondos y bordes (EN) define exactamente qué sucede cuando los radios de las esquinas adyacentes solicitan más espacio del que tiene la caja.
Si la suma de dos radios adyacentes excede la longitud de ese Edge, el navegador reduce proporcionalmente cada radio del cuadro hasta que las curvas dejan de superponerse.
Esa única regla es la que limita un radio del 100% en un elemento cuadrado a un 50% visual, produciendo un círculo limpio en lugar de una forma doblada.
- Curvas simétricas individuales: limitadas automáticamente, siempre representando como un arco limpio
- Formas multilobuladas o cóncavas: fuera de lo que puede producir cualquier valor de radio de borde, generado o escrito a mano
Las soluciones alternativas de estilo squircle y blob cubiertas anteriormente existen precisamente porque este techo es fijo, no porque los generadores de radio de borde no se hayan puesto al día todavía.
Para formas que necesitan cortarse en una imagen en lugar de simplemente redondear su contenedor, CSS mask-image o SVG <clipPath> continúa donde se detiene el radio del borde.
Requisitos del navegador heredado
Los entornos de renderizado fuera de la pila del navegador moderno se comportan de manera diferente:
- Clientes de correo electrónico: border-radius tiene un soporte total del 68.29% más un soporte parcial del 14.63% entre los clientes rastreados, según los datos de ¿Puedo enviar un correo electrónico (EN)? Esto está muy por debajo de la cifra casi universal que publican los navegadores modernos.
- Outlook en Windows: las versiones de 2003 a 2019 procesan el correo electrónico a través de un motor basado en Word que ignora por completo el radio del borde y requiere un elemento VML RoundRect en su lugar.
- Yahoo Mail y AOL: admiten la propiedad pero eliminan la sintaxis de barra diagonal utilizada para las esquinas elípticas
Nada de eso contradice las cifras de soporte del navegador mencionadas anteriormente. Es un proceso de renderizado separado para el cual la vista previa en vivo de un generador nunca fue creada para simular.
Errores y correcciones comunes en el radio del borde
La mayoría de los errores en el radio fronterizo se remontan a un puñado de reincidentes.
- Unidades mixtas en una declaración: emparejar px y % en la misma taquigrafía produce esquinas que cambian de manera inconsistente entre los tamaños de pantalla. Elige una unidad por componente y quédese con ella
- Falta control de desbordamiento: un contenedor redondeado con una imagen cuadrada en su interior todavía muestra esquinas cuadradas a menos que el padre establezca el desbordamiento en oculto
- Errores en el orden de las esquinas: olvidar la secuencia superior izquierda, superior derecha, inferior derecha, inferior izquierda redondea el lado equivocado de un cuadro asimétrico
- Prefijos de proveedores sobrantes: copiar fragmentos de un generador antiguo todavía incluye líneas -webkit- y -moz- que ningún navegador actual lee
/* the overflow fix: children and background images follow the curve */
.thumb {
border-radius: 16px;
overflow: hidden;
}Pegar la salida del generador directamente en un archivo de producción sin una segunda mirada es la forma en que el problema del prefijo sobrante generalmente sobrevive a una revisión del código.
Ejecutar el bloque exportado a través de un CSS embellecedor (EN) primero hace que esas fechas límite sean obvias antes de que lleguen a una solicitud de extracción.
Preguntas frecuentes: Generador de border-radius CSS
¿Cuál es la diferencia entre radio de borde y esquinas redondeadas?
"Esquinas redondeadas" describe el resultado visual. Border-radius es la propiedad CSS específica que la produce y funciona en cualquier cuadro, tenga o no un borde visible. Los diseñadores dicen "esquinas redondeadas" en términos generales, cubriendo radios de borde, trazados SVG y clip-path por igual.
¿Se pueden exportar valores de radio de borde directamente a las clases Tailwind o Bootstrap?
La pestaña Tailwind de este generador escribe una entrada de configuración, pero ninguna herramienta asigna automáticamente un valor de píxel directamente a una clase de utilidad existente. Tailwind y Bootstrap envían escalas de redondeo fijas, por lo que un valor arbitrario aún necesita traducción manual a la clase más cercana, como rounded-lg o .rounded-3.
¿Es necesario un generador de radio de borde para el diseño responsivo?
No. Radio de borde basado en porcentaje ya se escala con el ancho y alto del propio elemento, por lo que un único valor se adapta a través de puntos de interrupción sin un generador o una reescritura de consulta de medios. Un generador sólo acelera la búsqueda de ese porcentaje visualmente en lugar de calcularlo a mano.
¿El radio del borde afecta las imágenes de fondo o solo los bordes de los elementos?
Border-radius recorta todo lo que hay dentro del cuadro, incluidas las imágenes de fondo, una vez que overflow está configurado como oculto. Sin esa regla de desbordamiento, el Edge exterior del cuadro se redondea visualmente, mientras que una imagen de fondo o un elemento secundario aún pueden mostrar esquinas cuadradas debajo.
¿Qué debe hacer inmediatamente después de que un generador de radio de borde CSS exporte tu código?
El trabajo de un generador de border-radius en CSS finaliza en el momento en que le entrega un valor. Lo que sucede a continuación decide si ese número se mantiene dentro de un sistema de diseño real o si lo reescribe la siguiente persona que toque el archivo.
Aceptar el valor exportado sin compararlo con el contenido real es un mal negocio. Ahorra un minuto y obtiene una esquina que se ve bien en el cuadro de marcador de posición de la herramienta y ligeramente desviada en una foto o botón real.
Tres pasos convierten un número generado en algo duradero:
- Pruebe el valor con contenido en vivo, no con una forma de marcador de posición
- Bloquearlo en un token de diseño en lugar de un número simple
- Registre el orden de las esquinas para que la próxima edición no lo invierta
Las esquinas redondeadas rara vez quedan solas en una interfaz real. Emparejar ese radio con un generador de sombras de caja suele ser la siguiente decisión de estilo en la misma tarjeta o botón.