¿Qué es el Generador de CSS Border Radius?
El Generador de CSS Border Radius es una herramienta visual que te permite crear formas personalizadas de border-radius arrastrando asas directamente en una vista previa en vivo. En lugar de adivinar valores CSS, ves cómo cambia la forma en tiempo real mientras la ajustas.
La herramienta admite tanto el modo Simple (4 valores de esquina) para esquinas redondeadas estándar como el modo Avanzado (sintaxis de 8 valores con horizontal/vertical por esquina) para crear formas blob orgánicas, huevos, gotas y otras formas creativas.
¿Para quién es esto?
Desarrolladores Web
Diseñadores
Entusiastas de CSS
Cómo Usar
Uso Básico (Modo Simple)
Ajusta los Valores de las Esquinas
Usa los controles deslizantes o escribe valores en las entradas numéricas para establecer el radio de cada esquina (Arriba Izquierda, Arriba Derecha, Abajo Derecha, Abajo Izquierda).
Bloquea o Desbloquea las Esquinas
Activa Bloquear Todo para que todas las esquinas cambien juntas, o desbloquea para ajustar cada esquina independientemente y crear formas asimétricas.
Arrastra las Asas
La vista previa de la forma se actualiza al instante — también puedes arrastrar las asas directamente en la forma para una edición visual intuitiva.
Copia el Código CSS
Copia el código CSS generado con el botón Copiar CSS y pégalo directamente en tu hoja de estilos.
Creando Formas Orgánicas (Modo Avanzado)
Cambia al Modo Avanzado
Cambia al modo Avanzado para acceder a 8 valores — cada esquina obtiene controles de radio horizontal (H) y vertical (V) separados.
Usa la Sintaxis de Barra
Esto habilita la sintaxis de barra CSS: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 para esquinas elípticas y formas orgánicas.
Ajusta Finamente con 8 Asas
Arrastra las 8 asas a lo largo de los bordes de la forma, o usa los controles deslizantes para un control preciso sobre los valores de radio horizontal y vertical.
Genera Formas Aleatorias
Haz clic en Aleatorio para generar formas blob interesantes al instante — perfecto para exploración creativa y diseños únicos.
Usando Presets
Haz clic en el botón Presets para revelar 12 formas integradas incluyendo Redondeado, Píldora, Círculo, Hoja, Gota, Huevo y varios estilos Blob. Hacer clic en un preset aplica automáticamente sus valores y cambia al modo apropiado.
Calculadora de Radio Anidado
Al colocar un elemento hijo redondeado dentro de un padre redondeado con relleno, el radio interior debe calcularse como: inner = max(0, outer - padding). Abre la sección Calculadora de Radio Anidado, ingresa el radio exterior y el relleno, y la herramienta calcula el radio interior correcto con una vista previa visual.
Radios Desajustados
- Las esquinas interiores no se alinean con las exteriores
- Espacios visuales incómodos
- Apariencia poco profesional
Alineación Perfecta
- Radio interior matemáticamente correcto
- Curvas suaves y consistentes
- Apariencia profesional y pulida
Características
Dos Modos de Edición
El modo Simple proporciona 4 controles deslizantes para esquinas redondeadas estándar. El modo Avanzado expone la sintaxis completa de CSS border-radius de 8 valores, permitiéndote establecer radio horizontal y vertical independiente por esquina para formas blob orgánicas.
Asas de Arrastre Visual
Las asas de arrastre se colocan directamente en la vista previa de la forma. En modo Simple, 4 asas se sientan en las esquinas. En modo Avanzado, 8 asas aparecen a lo largo de los bordes con líneas guía mostrando la dirección del radio.
Alternancia de Unidades (px / %)
Cambia entre unidades de píxeles y porcentaje. Los valores se convierten automáticamente cuando cambias, por lo que tu forma permanece consistente en diferentes sistemas de unidades.
Bloquear Todas las Esquinas
Cuando está bloqueado, ajustar cualquier esquina aplica el mismo valor a las cuatro esquinas para un redondeado uniforme. Desbloquea para control individual y diseños asimétricos.
12 Presets Integrados
Aplica rápidamente formas comunes: Redondeado, Píldora, Círculo, Hoja, Boleto, Gota, Huevo, Blob (3 variantes), Insignia y Mensaje. Cada preset muestra una vista previa de forma mini para una selección fácil.
Aleatorio
Genera formas orgánicas aleatorias con un clic. La herramienta cambia automáticamente al modo Avanzado y crea formas blob únicas perfectas para proyectos creativos.
Vista Previa Personalizable
Ajusta las dimensiones de la vista previa (ancho y alto de 100px a 500px) para probar cómo se ve tu border-radius en diferentes tamaños de elemento. Cambia el color de la forma y el color de fondo con selectores de color integrados.
Calculadora de Radio Anidado
Una utilidad plegable que calcula el border-radius interior correcto cuando un elemento hijo se encuentra dentro de un padre redondeado con relleno. Ingresa el radio exterior y el relleno para obtener el radio interior matemáticamente correcto, con una vista previa visual.
Salida CSS Instantánea
El código CSS generado se actualiza en tiempo real y puede copiarse a tu portapapeles con un clic. La salida usa notación abreviada e incluye la sintaxis de barra cuando los valores horizontal y vertical difieren.
Preguntas Frecuentes
¿Cuál es la diferencia entre el modo Simple y Avanzado?
El modo Simple usa el border-radius estándar de 4 valores (un valor por esquina) — perfecto para botones, tarjetas y elementos de UI estándar con esquinas redondeadas circulares.
El modo Avanzado usa la sintaxis CSS de 8 valores donde cada esquina tiene radio horizontal y vertical separado, permitiendo formas blob orgánicas, esquinas elípticas y formas creativas que no son posibles con 4 valores.
¿Qué significa la barra (/) en border-radius?
La propiedad CSS border-radius admite una sintaxis de barra: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.
Los valores antes de la barra controlan el radio horizontal, y los valores después controlan el radio vertical. Cuando estos difieren, las esquinas se vuelven elípticas en lugar de circulares, creando formas orgánicas como huevos, gotas y blobs.
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% crea una forma similar a un huevo con curvatura horizontal y vertical diferente.¿Debo usar px o % para border-radius?
La elección depende de tu caso de uso:
- Usa px para elementos de tamaño fijo como botones e iconos donde quieres control exacto y redondeado consistente independientemente del tamaño del elemento
- Usa % para elementos responsivos o al crear formas blob/orgánicas — 50% en un cuadrado crea un círculo perfecto, y los valores de porcentaje se escalan proporcionalmente con las dimensiones del elemento
¿Para qué sirve la Calculadora de Radio Anidado?
Cuando tienes un elemento padre redondeado con relleno, el hijo interior necesita un border-radius más pequeño para verse correcto y mantener armonía visual.
La fórmula es: inner radius = max(0, outer radius - padding)
Ejemplo: Una tarjeta con border-radius de 16px y relleno de 8px necesita un radio interior de 8px en su área de contenido. Sin este cálculo, las esquinas interiores no se alinearán correctamente con la curva exterior, creando un espacio visual incómodo.
¿Puedo usar el CSS generado en cualquier framework?
Sí. La salida es CSS estándar que funciona en todos los navegadores modernos y es compatible con cualquier framework o entorno de desarrollo.
Puedes pegarlo directamente en:
- Hojas de estilos CSS estándar (archivos .css)
- Estilos en línea en HTML
- Soluciones CSS-in-JS (styled-components, Emotion, etc.)
- Módulos CSS
- Valores arbitrarios de Tailwind CSS
- Cualquier preprocesador (SCSS, LESS, Stylus)
El código generado usa propiedades CSS estándar con excelente soporte de navegadores (IE9+, todos los navegadores modernos).
Aún no hay comentarios. ¡Sé el primero en comentar!