Cómo usar esta herramienta para desarrolladores
- Escribe los cuatro radios horizontales.
- Activa radios elípticos si necesitas valores verticales distintos.
- Introduce la segunda serie en el área de texto.
- Genera la declaración CSS.
CSS Border Radius Generator
Construye border-radius para las cuatro esquinas y permite generar radios elípticos con la sintaxis horizontal / vertical de CSS. Resulta útil para reproducir formas asimétricas sin calcular manualmente el orden de cada esquina.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Ordena los valores como top-left, top-right, bottom-right y bottom-left, respetando la gramática de border-radius.
Si se activa el modo elíptico, combina las dos listas con una barra: horizontal / vertical.
Los valores se emiten en px. CSS admite otros formatos, pero este generador mantiene una entrada numérica controlada.
Ejemplo
border-radius: 24px 8px 24px 8px / 12px 30px 12px 30px;
Casos de uso
- Tarjetas asimétricas.
- Avatares y blobs geométricos.
- Botones personalizados.
- Contenedores decorativos.
Consejos para obtener resultados fiables
- Mantén radios coherentes con el tamaño del elemento.
- Para círculos simples usa 50% directamente.
- Comprueba formas elípticas en distintos aspect ratios.
- No confundas el orden con TRBL de margin.
Detalles del procesamiento
La salida conserva siempre los cuatro valores para que el orden de esquinas sea explícito.
No genera clip-path ni formas orgánicas; solo border-radius válido basado en píxeles.
Preguntas frecuentes
¿En qué orden van los cuatro valores de border-radius?
Top-left, top-right, bottom-right y bottom-left.
¿Cómo creo un border-radius elíptico en CSS?
Activa el modo elíptico y define una segunda serie vertical; la herramienta añadirá la barra / correspondiente.
¿Puedo usar porcentajes en lugar de píxeles?
Este generador usa píxeles para mantener los campos numéricos consistentes. Puedes editar después la salida si necesitas porcentajes.
¿Por qué border-radius puede llevar una barra?
La barra separa los radios horizontales de los verticales de cada esquina.
¿El generador comprueba si el radio supera el tamaño del elemento?
No conoce las dimensiones del elemento; el navegador aplica el algoritmo CSS de ajuste cuando los radios son demasiado grandes.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |