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

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.

Ferramentas relacionadas

Cantos Arredondados de Imagem

Aplique cantos arredondados, uma máscara de círculo completo, ou raios por canto a uma imagem — visualização com tabuleiro de xadrez pra transparência, baixe como PNG ou JPEG.

Imagem 0 0

Gerador de Triângulos CSS

Gere triângulos CSS puros em 8 direções — com border ou clip-path, copie a regra e use.

Cor 0 0

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

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Gerador de CSS Box Shadow

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Cor 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0