¿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

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.

Herramientas relacionadas

Esquinas Redondeadas de Imagen

Aplica esquinas redondeadas, una máscara de círculo completo, o radios por esquina a una imagen — vista previa con tablero de ajedrez para transparencia, descarga como PNG o JPEG.

Imagen 0 0

Generador de Triángulos CSS

Genera triángulos CSS puros en 8 direcciones — usando border o clip-path, copia la regla y úsala.

Color 0 0

Generador de CSS clip-path (polígono, círculo)

Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).

Color 0 0

Generador de Gradientes CSS

Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.

Color 0 0

Generador de CSS Box Shadow

Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.

Color 0 0

Playground de Filtros CSS

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Color 0 0