Generador de radio de borde
Genere valores de radio de borde CSS visualmente con nuestro generador de radio de borde gratuito. Arrastre 8 controladores de esquina independientes para crear círculos, píldoras, manchas y formas redondeadas personalizadas: obtenga resultados taquigráficos y taquigráficos CSS listos para copiar al instante. Todo el procesamiento se ejecuta localmente en su navegador. No es necesario registrarse.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
¿Por qué utilizar nuestro generador de radio de borde?
- Generación instantánea de radio de borde CSS: genere valores de radio de borde CSS visualmente y obtenga resultados CSS listos para copiar en tiempo real. Nuestro generador de radio de borde actualiza la vista previa y CSS en cada movimiento del control deslizante: no es necesario presionar ningún botón ni registrarse.
- Generador de radio de borde seguro en línea: toda la generación de CSS se realiza localmente en su navegador mediante JavaScript. Sus configuraciones de diseño nunca salen de su dispositivo, lo que garantiza un 100 % de privacidad cuando utiliza nuestro generador de radio de borde en línea.
- Generador de radio de borde en línea: sin instalación: use nuestro generador de radio de borde directamente en su navegador sin necesidad de descargas, complementos ni Node.js. Genere valores de radio de borde CSS desde cualquier dispositivo, en cualquier momento.
- Control de 8 puntos y 10 ajustes preestablecidos de formas: establezca radios horizontales y verticales independientes para las 4 esquinas (8 valores en total) para crear círculos, píldoras, manchas, hojas y formas orgánicas. Elija entre 10 ajustes preestablecidos integrados o vincule todas las esquinas para editarlas juntas. Genera formatos variables taquigráficos, taquigráficos y CSS.
Casos de uso comunes para el generador de radio de borde
- Diseño de componentes de interfaz de usuario: los desarrolladores de frontend utilizan nuestro generador de radio de borde para diseñar esquinas redondeadas para botones, tarjetas, modales y campos de entrada. Arrastre los controladores para encontrar el radio perfecto y copie el CSS directamente en su hoja de estilo.
- Tokens del sistema de diseño: los ingenieros de sistemas de diseño utilizan nuestro generador de radio de borde para definir tokens de radio de borde consistentes. La salida de la variable CSS se asigna directamente a archivos de tokens de diseño para Tailwind, tokens Figma y Diccionario de estilos.
- Creación de manchas y formas orgánicas: los diseñadores utilizan nuestro generador de radio de borde para crear formas de manchas orgánicas para secciones de héroes, avatares y elementos decorativos. La interfaz de 8 puntos permite formas totalmente asimétricas que serían imposibles de calcular manualmente.
- Iconos de aplicaciones y marcos de avatar: los desarrolladores móviles utilizan nuestro generador de radio de borde para crear la forma de ardilla utilizada para los íconos de aplicaciones de iOS y los íconos adaptables de Android. El ajuste preestablecido de Squircle (30%) produce instantáneamente la forma cuadrada redondeada correcta.
- Elementos visuales de la página de destino: los diseñadores de marketing utilizan nuestro generador de radio de borde para crear CTA en forma de píldora, marcos de imágenes redondeados y formas decorativas para páginas de destino. Los ajustes preestablecidos de Pill y Blob son especialmente populares para las páginas de destino SaaS modernas.
- Aprender el radio del borde de CSS: los desarrolladores que aprenden CSS utilizan nuestro generador de radio de borde para comprender cómo funciona la sintaxis del radio de borde de 8 valores. La vista previa en vivo deja claro de inmediato cómo cada valor de radio horizontal y vertical afecta la forma.
Entendiendo el radio del borde de CSS
- Cómo funciona nuestro generador de radio de borde: haga clic en cualquiera de las 10 formas preestablecidas (Nítida, Redondeada, Tarjeta, Círculo, Píldora, Ardilla, Gota, Hoja, Huevo, Diamante) para aplicar instantáneamente una forma inicial. O comience desde la forma asimétrica predeterminada y ajuste los controles deslizantes manualmente.
- Arrastre los 8 tiradores de las esquinas: cada esquina tiene dos controles deslizantes: radio horizontal (X) y vertical (Y). Arrastre los controles deslizantes o escriba valores directamente. Active "Vincular todas las esquinas" para editar los 8 valores simultáneamente. Cambie entre unidades px y % en cualquier momento.
- Copie el CSS generado: el generador de radio de borde genera cuatro formatos CSS en tiempo real: taquigrafía (radio de borde), escritura larga (propiedades de esquina individuales), regla CSS completa con selector y declaraciones de variables CSS. Haga clic en cualquier botón Copiar para copiar el formato que necesita.
- Formatos de salida CSS border-radius: cuando todas las esquinas son iguales, genera border-radius: 16px. Cuando las esquinas difieren pero X=Y, genera el formato de 4 valores. Cuando X≠Y, genera el formato completo de 8 valores con una barra diagonal.
Preguntas frecuentes
Un generador de radio de borde es una herramienta visual que le permite establecer valores de radio de borde de CSS arrastrando controladores en una forma de vista previa y genera el CSS listo para copiar. Nuestro generador de radio de borde admite los 8 valores de esquinas individuales (arriba-izquierda-x, arriba-izquierda-y, etc.) para formas totalmente asimétricas; no es necesario registrarse.
El generador de radio de borde genera la abreviatura de radio de borde cuando todas las esquinas son iguales, o la sintaxis completa de 8 valores (radio-arriba-izquierda-borde, radio-arriba-derecha-borde, radio-abajo-derecha-borde, radio-borde-abajo-izquierda) cuando las esquinas difieren. También genera declaraciones de variables CSS para flujos de trabajo de tokens de diseño.
La sintaxis de 4 valores (por ejemplo, 20px 40px 20px 40px) establece el mismo radio horizontal y vertical para cada esquina. La sintaxis de 8 valores (por ejemplo, 20px 40px 20px 40px / 10px 20px 10px 20px) establece radios horizontales y verticales independientes para cada esquina, lo que permite formas de manchas elípticas y orgánicas.
Sí. Toda la generación de CSS ocurre localmente en su navegador usando JavaScript. No se envían datos a ningún servidor, lo que garantiza total privacidad para su trabajo de diseño.
¡Sí! Nuestro generador de radio fronterizo es 100% gratuito, sin registro, sin cuenta y sin límites de uso. Genere valores de radio de borde CSS para cualquier proyecto directamente en su navegador.
Sí. Al establecer diferentes radios horizontales y verticales para cada esquina utilizando la interfaz de mango de 8 puntos, puede crear formas orgánicas de manchas, pastillas, hojas y otras formas redondeadas asimétricas. El generador de radio de borde genera la sintaxis CSS completa de 8 valores para estas formas.
El generador de radio de borde incluye ajustes preestablecidos para formas comunes: Círculo (50%), Píldora (9999px), Redondeado (8px), Tarjeta (16px), Squircle (30%), Blob (forma orgánica asimétrica), Hoja (asimétrica) y Sharp (0px). Haga clic en cualquier ajuste preestablecido para aplicarlo instantáneamente y ver el resultado CSS.
Sí. El generador de radio de borde muestra el CSS generado en un bloque de código con un botón de copia con un solo clic. También puede copiar valores de propiedades individuales o la regla CSS completa, incluido el selector.
Sí. Puede cambiar entre unidades px y % en el generador de radio de borde. Los valores porcentuales son relativos a las dimensiones del elemento: el 50% crea un círculo para elementos cuadrados y una elipse para los rectangulares.