Generador de radios de borde
Cree propiedades CSS border-radius
Entrada y opciones
Ajustes rápidos y ejemplos
Se ejecuta en su navegador. Sus datos permanecen en este dispositivo.
Resultados
Ingrese sus valores para ver el resultado.
Acerca del Generador de radios de borde
Nuestro generador de border radius en CSS gratuito le da control visual completo sobre las esquinas redondeadas de cualquier elemento HTML. Ajuste cada esquina por separado o vincúlelas todas, elija entre varias unidades (px, %, em, rem) y vea el resultado al instante en el panel de vista previa en vivo.
Las esquinas redondeadas son una parte fundamental del diseño web moderno. Desde los sutiles 4px en tarjetas y campos hasta los círculos completos al 50% para avatares, la propiedad border-radius define cómo perciben los usuarios su interfaz. Esta herramienta le permite encontrar los valores exactos que necesita sin adivinar y sin recargar el navegador una y otra vez.
El generador incluye 10 formas predefinidas, como Cuadrado, Círculo, Píldora, Gota y Orgánico, además de un generador aleatorio para explorar con creatividad. El resultado se ofrece en varios formatos: CSS abreviado, propiedades individuales por esquina, una clase CSS lista para usar y un equivalente aproximado en Tailwind CSS.
Características principales
- Control independiente de cada esquina: superior izquierda, superior derecha, inferior derecha e inferior izquierda
- Interruptor para vincular las esquinas y ajustar el radio de las cuatro por igual
- Cuatro opciones de unidad: píxeles (px), porcentaje (%), em y rem para diseños adaptables
- Vista previa en tiempo real con tamaño de elemento ajustable (100-300px) y selector de color personalizado
- 10 formas predefinidas: Cuadrado, Redondeado, Círculo, Píldora, Redondeado arriba, Redondeado abajo, Redondeado a la izquierda, Redondeado a la derecha, Gota y Orgánico
- Indicadores visuales que muestran el radio exacto de cada esquina
- Generador de radios aleatorios para inspirarse y experimentar
- Varios formatos de salida CSS: abreviado, propiedades individuales, clase CSS y aproximación en Tailwind CSS
- Copia al portapapeles con un clic para usar el resultado al instante en sus proyectos
- Controles deslizantes con rango visible para ajustar los valores de forma intuitiva
Cómo usar el Generador de radios de borde
- Seleccione la unidad: Elija px para tamaños fijos, % para escalado adaptable o em/rem para tamaños basados en la tipografía.
- Ajuste los valores de las esquinas: Use los controles deslizantes para definir el radio de cada esquina por separado, o active «Vincular todas las esquinas» para un redondeo uniforme.
- Pruebe las formas predefinidas: Haga clic en cualquiera de las 10 formas, como Círculo, Píldora o Gota, para aplicar al instante configuraciones comunes.
- Vea el resultado: Consulte la vista previa en vivo, con tamaño y color ajustables, para ver exactamente cómo quedará su border radius.
- Copie el CSS: Haga clic en Copiar para obtener el código CSS de border-radius, o use la sección de formatos alternativos para obtener propiedades individuales o clases de Tailwind.
Casos de uso
- Estilo de botones: Cree botones en forma de píldora, botones de llamada a la acción con redondeo sutil o botones de icono totalmente circulares.
- Componentes de tarjeta: Aplique esquinas redondeadas coherentes a tarjetas, modales y cuadros de diálogo de su sistema de diseño.
- Imágenes de avatar: Use un border-radius del 50% en imágenes cuadradas para crear avatares y fotos de perfil perfectamente circulares.
- Campos de entrada: Añada un redondeo suave a campos de formulario, áreas de texto y menús desplegables para lograr un aspecto moderno.
- Elementos de navegación: Dé estilo a pestañas, insignias, etiquetas y elementos de navegación con el redondeo de esquinas adecuado.
- Formas creativas: Combine valores asimétricos en las esquinas para crear manchas orgánicas, gotas y elementos decorativos únicos.
- Diseño de tooltips y popovers: Aplique un redondeo preciso a tooltips, popovers y menús desplegables.
- Tokens de diseño adaptable: Establezca valores de border-radius coherentes en todo su proyecto usando unidades em o rem.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, el Generador de radios de borde es totalmente gratuito y sin restricciones. Puede usarlo tantas veces como quiera, sin registro ni pago.
¿Mis datos están seguros?
Por supuesto. La herramienta se ejecuta por completo en su navegador. No se transmite ningún dato a ningún servidor, así que sus ajustes y el código CSS generado se mantienen privados en su dispositivo.
¿Cuál es la diferencia entre px y % en border-radius?
Los valores en píxeles (px) crean un radio fijo sin importar el tamaño del elemento. Los valores en porcentaje (%) son relativos a las dimensiones del elemento, por lo que se adaptan. Por ejemplo, un 50% en un elemento cuadrado crea un círculo perfecto.
¿Cómo hago un círculo perfecto con CSS?
Establezca border-radius en 50% en un elemento con el mismo ancho y alto. La forma predefinida Círculo de esta herramienta aplica exactamente esa configuración.
¿Todos los navegadores admiten border-radius?
Sí, la propiedad CSS border-radius es totalmente compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. No se necesitan prefijos de proveedor.
Consejos y buenas prácticas
- Use valores coherentes: Defina de 2 a 3 valores estándar de border-radius en su sistema de diseño (por ejemplo, 4px, 8px, 16px) para mantener la coherencia visual.
- Use porcentajes para círculos: Establezca 50% en elementos cuadrados para obtener círculos perfectos que se escalan solos cuando cambia el tamaño.
- Sea sutil en los formularios: Los valores pequeños (2-8px) funcionan mejor en campos de entrada y elementos de formulario para mantener un aspecto limpio y profesional.
- Pruebe esquinas asimétricas: Valores distintos en cada esquina crean formas únicas que pueden dar carácter a los elementos decorativos.
- Considere unidades adaptables: Use em o rem para valores de border-radius que se escalen de forma proporcional con su tipografía.
- Pruebe con contenido real: Compruebe siempre cómo se ven las esquinas redondeadas con el contenido real dentro del elemento, sobre todo en distintos tamaños de ventana.