border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Gerador Online Grátis de Raio de Borda — Editor Visual CSS

Crie valores personalizados de border-radius em CSS de forma visual. Projete cantos arredondados, botões em forma de pílula, blocos orgânicos e formas criativas com uma visualização em tempo real e saída de CSS instantânea.

O Que É um Gerador de Raio de Borda?

Um gerador de raio de borda é uma ferramenta visual que ajuda os designers da web a criar valores de border-radius em CSS sem calcular manualmente valores em pixels ou porcentagens. Em vez de digitar números e recarregar seu navegador, você ajusta os sliders e vê a forma mudar em tempo real.

A propriedade CSS border-radius arredonda os cantos de um elemento. É uma das propriedades CSS mais versáteis — capaz de criar desde cantos arredondados sutis até formas orgânicas complexas.

Como Usar Este Gerador de Raio de Borda

1. Escolha um preset — Comece com formas arredondadas, pílulas, blocos orgânicos, folhas, gotas ou formas morfológicas.
2. Ajuste os sliders — Controle cada canto individualmente ou vincule-os juntos.
3. Defina as dimensões — Mude a largura e a altura para corresponder ao seu elemento.
4. Personalize as cores — Defina a cor da caixa e o fundo da visualização.
5. Copie o CSS — Clique no botão de cópia e cole em seu stylesheet.

Recursos Principais

Recurso	Benefício
Controle individual de cantos	Defina cada canto individualmente para formas únicas
Vincular/desvincular cantos	Alterne entre cantos uniformes e personalizados
6 presets de forma	Comece rapidamente com padrões comuns de border-radius
Controles de largura e altura	Corresponda às dimensões reais do seu elemento
Visualização em tempo real	Veja a forma atualizar instantaneamente conforme ajusta
Copiar para área de transferência	Exportação de CSS com um clique

Entendendo o border-radius em CSS

Sintaxe

A propriedade border-radius aceita até quatro valores, um para cada canto:

border-radius: top-left top-right bottom-right bottom-left;

Padrão de Valor	Cantos Afetados
16px	Todos os quatro cantos igualmente
16px 8px	Top-left + bottom-right / top-right + bottom-left
16px 8px 4px	Top-left / top-right + bottom-left / bottom-right
16px 8px 4px 2px	Cada canto individualmente

Pixels vs Percentagens

• Pixels (px): Raio de borda fixo, independentemente do tamanho do elemento.
• Percentagens (%): Relativos às dimensões do elemento. 50% em um quadrado cria um círculo perfeito; 50% em um retângulo cria uma elipse.

Usando Percentagens para Círculos e Pílulas

Um border-radius: 50% cria um círculo perfeito quando a largura é igual à altura. Para botões em forma de pílula, use um valor grande em pixels (como 999px) — isso garante que o raio sempre exceda a metade da dimensão mais curta, criando extremidades totalmente arredondadas, independentemente do tamanho do elemento.

Comparação dos Presets de Forma

Preset	Valores	Caso de Uso
Arredondado	16px uniforme	Cartões, modais, imagens
Pílula	999px uniforme	Botões, tags, selos
Bloco Orgânico	60px 40px 70px 30px	Elementos decorativos, seções hero
Folha	0 100px 0 100px	Elementos UI orgânicos, divisores decorativos
Gotinha	0 100px 100px 0	Dicas, callouts, ponteiros
Morfológico	30px 70px 50px 80px	Formas abstratas, fundos

Casos de Uso no Mundo Real

Estilo de Botões

Crie botões em forma de pílula com border-radius: 999px para um visual moderno e amigável, comum em sistemas de design.

Componentes de Cartões

Arredondamentos sutis (8–16px) suavizam as bordas dos cartões e criam uma hierarquia visual sem ser distraente.

Avatares de Perfil

Use border-radius: 50% em imagens quadradas para criar avatares circulares, comuns em aplicativos sociais e dashboards.

Blocos Decorativos

Valores assimétricos em grandes elementos de fundo criam formas orgânicas trendys populares no design web moderno.

Dicas Personalizadas

Use valores mistos (ex: 8px 8px 8px 0) para criar uma dica com um canto afiado apontando para o elemento que a desencadeia.

Dicas para Um Melhor border-radius

Dica	Explicação
Mantenha a consistência	Use o mesmo raio em todo o seu sistema de design (ex: 8px para pequenos, 16px para grandes).
Use unidades relativas	Para círculos responsivos, use 50% em vez de um valor fixo em pixels.
Valores grandes para pílulas	Use 9999px ou 999px para garantir extremidades totalmente arredondadas em qualquer elemento.
Desvincule para formas orgânicas	Cantos assimétricos criam formas interessantes e únicas.
Cuidado com o conteúdo	Certifique-se de que o texto e o conteúdo interno não sejam cortados.
Teste em diferentes dispositivos	Garanta que a forma funcione bem em telas pequenas e grandes.

Perguntas Frequentes

O que acontece quando o border-radius é maior que o elemento?

Quando o border-radius é maior que o elemento, o elemento se torna uma forma circular completa. Por exemplo, um quadrado com border-radius: 50% se torna um círculo.

Posso usar border-radius com elementos flexíveis?

Sim, o border-radius funciona com elementos flexíveis, desde que suas dimensões sejam definidas corretamente. Por exemplo, um div com width: 100% e border-radius: 50% se torna um semicírculo.

Como posso criar cantos arredondados em apenas dois lados?

Você pode usar valores separados para cada canto. Por exemplo, border-radius: 10px 20px 10px 20px arredonda apenas os lados superior e inferior.

É possível usar border-radius com box-shadow?

Sim, border-radius e box-shadow podem ser usados juntos. O border-radius define a forma do elemento, e o box-shadow adiciona sombras ao redor dele.

Como posso criar uma forma em forma de losango com border-radius?

Para criar uma forma em forma de losango, você pode usar border-radius: 50% e definir width e height com valores diferentes. Por exemplo, width: 200px; height: 100px; border-radius: 50% cria um losango.