Quando elíptico é mesmo útil?

Principalmente formas 'blob' orgânicas em ilustrações, com cantos assimétricos. UI padrão quase sempre usa uniforme ou 4 valores.

% é relativo à largura/altura do elemento — 50% num quadrado dá círculo, num retângulo um oval. px é absoluto.

O preset pill fica estranho num quadrado.

Pill = 999px assume elemento mais largo que alto. Em quadrado vira um círculo.

Suporte de navegador?

`border-radius` de 4 valores e sintaxe elíptica funcionam em todo navegador desde 2010. Universalmente seguro.

Gerador de Border Radius

Cor

Editor visual de border-radius: modo uniforme (arredondamento rápido), modo por canto (chat bubble, tabs), modo elíptico (blob — raio horizontal ≠ vertical). Presets para formas comuns. Unidades em `px`, `%` ou `rem`. Saída CSS o mais curta possível — um valor se todos os cantos forem iguais, quatro se diferirem, sintaxe `h / v` para elíptico.

—

Presets

Uniforme (um valor para todos)Elíptico (horizontal / vertical)UnidadeColor

All corners16px

Pré-visualização

CSS

border-radius: 16px;

Como usar

Comece com um preset, ou desligue 'Uniforme' para editar por canto.
Ligue 'Elíptico' para formas blob (cada canto com dois raios).
Copie `border-radius: …` para o seu CSS.

Perguntas frequentes

Quando elíptico é mesmo útil?: Principalmente formas 'blob' orgânicas em ilustrações, com cantos assimétricos. UI padrão quase sempre usa uniforme ou 4 valores.
Raio px vs %?: % é relativo à largura/altura do elemento — 50% num quadrado dá círculo, num retângulo um oval. px é absoluto.
O preset pill fica estranho num quadrado.: Pill = 999px assume elemento mais largo que alto. Em quadrado vira um círculo.
Suporte de navegador?: `border-radius` de 4 valores e sintaxe elíptica funcionam em todo navegador desde 2010. Universalmente seguro.