¿Cuándo sirve realmente elíptico?

Sobre todo para formas 'blob' orgánicas en ilustraciones, con esquinas asimétricas. La UI estándar suele usar uniforme o 4 valores.

% es relativo al ancho/alto del elemento — 50% en un cuadrado da círculo, en un rectángulo un óvalo. px es absoluto.

El preset pill se ve mal en un cuadrado.

Pill = 999px asume elemento más ancho que alto. En cuadrado queda como círculo.

¿Soporte de navegador?

`border-radius` de 4 valores y sintaxis elíptica funcionan en todo navegador desde 2010. Universalmente seguro.

Generador de Border Radius

Color

Editor visual de border-radius: modo uniforme (redondeo rápido), modo por esquina (chat bubble, tabs), modo elíptico (blob — radio horizontal ≠ vertical). Presets para las formas comunes. Unidades en `px`, `%` o `rem`. Salida CSS más corta posible — un valor si todas las esquinas son iguales, cuatro si difieren, sintaxis `h / v` para elíptico.

—

Presets

Uniforme (un valor para todas)Elíptico (horizontal / vertical)UnidadColor

All corners16px

Vista previa

CSS

border-radius: 16px;

Cómo usar

Empieza con un preset, o desactiva 'Uniforme' para editar por esquina.
Activa 'Elíptico' para formas blob (cada esquina con dos radios).
Copia `border-radius: …` y pégalo en tu CSS.

Preguntas frecuentes

¿Cuándo sirve realmente elíptico?: Sobre todo para formas 'blob' orgánicas en ilustraciones, con esquinas asimétricas. La UI estándar suele usar uniforme o 4 valores.
¿Radio en px vs %?: % es relativo al ancho/alto del elemento — 50% en un cuadrado da círculo, en un rectángulo un óvalo. px es absoluto.
El preset pill se ve mal en un cuadrado.: Pill = 999px asume elemento más ancho que alto. En cuadrado queda como círculo.
¿Soporte de navegador?: `border-radius` de 4 valores y sintaxis elíptica funcionan en todo navegador desde 2010. Universalmente seguro.