Gerador de Raio de Borda CSS: Crie Cantos Arredondados Visualmente
Precisa de cantos arredondados em um cartão, botão ou avatar? O CSS Border Radius Generator permite que você construa valores de border-radius visualmente: use um valor para todos os cantos ou defina cada canto separadamente, escolha px ou %, e copie o CSS com um clique.
Exemplo: Escolha o preset "Médio" para 8px em todos os cantos, ou "Círculo" para 50% (perfeito para avatares quadrados). Use "Por canto" para arredondar apenas a parte superior (por exemplo, modais) ou inferior (por exemplo, folhas inferiores). Altere o fundo da pré-visualização para ver a forma claramente. Copie o CSS e cole-o em sua folha de estilo.
O que é border-radius?
border-radius é uma propriedade CSS que arredonda os cantos da caixa de borda de um elemento. Você pode definir um valor para os quatro cantos ou definir cada canto separadamente (superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo). Os valores podem ser em px (tamanho fixo) ou % (relativo ao elemento) — 50% em um quadrado faz um círculo.
Por que usar um gerador de border radius?
Feedback visual — Veja a forma arredondada em uma caixa de pré-visualização antes de copiar o código.
Controle por canto — Arredonde apenas alguns cantos (por exemplo, apenas a parte superior para modais) sem memorizar a ordem dos quatro valores.
Unidades — Alterne entre px e %; use presets como Pílula (9999px) ou Círculo (50%) e ajuste a partir daí.
Presets — Nenhum, Pequeno, Médio, Grande, XL, Pílula, Círculo, Apenas superior, Apenas inferior.
Sem cadastro — Grátis, do lado do cliente, e funciona offline uma vez que a página está carregada.
Como a ferramenta funciona
- Use a pré-visualização para ver o raio de borda atual (e opcionalmente altere o fundo da pré-visualização).
- Escolha "Todos os cantos iguais" para um valor, ou "Por canto" para quatro valores (superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo).
- Escolha a unidade: px ou %.
- Copie o CSS da saída e cole-o em seu projeto.
- Experimente presets (por exemplo, Círculo, Pílula, Apenas superior) para iniciar um estilo.
Sintaxe: um valor se aplica a todos os cantos; quatro valores vão no sentido horário a partir do superior-esquerdo.
Casos de Uso
Cartões e painéis — Cantos levemente arredondados (por exemplo, 8px) para um visual moderno.
Botões — Raio pequeno para botões ou forma de pílula para pílulas de largura total.
Avatares e ícones — 50% em um elemento quadrado para um círculo.
Modais e folhas — Apenas os cantos superiores arredondados, ou apenas os inferiores, para sobreposições anexadas.
Perguntas Frequentes
Quando devo usar px vs %?
Use px para arredondamento fixo (por exemplo, 8px em cartões). Use % quando você quiser que o raio escale com o elemento — 50% em um quadrado dá um círculo; em um retângulo, dá extremidades semelhantes a pílulas.
O que é uma forma de pílula?
Uma pílula é um retângulo com extremidades curtas totalmente arredondadas. Use um valor grande (por exemplo, 9999px) ou 50% para que o raio seja pelo menos metade do comprimento do lado, dando extremidades semicirculares.
Experimente o CSS Border Radius Generator
CSS Border Radius Generator
Generate CSS border-radius values visually. Set one value for all corners or per-corner radii in px or %. Copy the CSS instantly.
The CSS Border Radius Generator is free, works in your browser, and requires no sign-up. Choose all-corners or per-corner, set px or %, try presets, and copy the CSS with one click — perfect for cards, buttons, avatars, and modals.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Font Pairing — Preview and test typography combinations