Ferramentas de Desenvolvimento e Codificação

Gerador de Raio de Borda CSS

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

permite aos utilizadores definir visualmente cantos arredondados para qualquer elemento HTML e gera instantaneamente o código da propriedade CSS `border-radius` — sem necessidade de escrita manual.

O que é CSS Border Radius?

Explica a propriedade CSS `border-radius`: o que faz (arredonda os cantos da borda externa de um elemento), os quatro cantos individuais (superior esquerdo, superior direito, inferior direito, inferior esquerdo) e como os valores podem ser expressos em `px`, `%`, `em` ou `rem`. Menciona que todos os quatro podem ser definidos independentemente para designs assimétricos.

Como usar o Gerador de CSS Border Radius

Uma seção simples passo a passo:

Arraste os seletores para definir o valor do raio para cada canto (Superior Esquerdo, Superior Direito, Inferior Direito, Inferior Esquerdo).
Ative Bloquear Cantos Juntos para aplicar um raio uniforme a todos os quatro cantos de uma vez.
Use os botões de predefinição para formas comuns instantâneas: quadrado nítido, retângulo arredondado, círculo/pílula completo ou curva diagonal.
Observe a caixa de pré-visualização ao vivo atualizar em tempo real.
Copie o código CSS gerado com um clique.

Predefinições de Border Radius Explicadas

Cobre as quatro predefinições incorporadas e seus casos de uso:

Nítido (0px) – para cartões de UI modernos e planos e células de tabela.
Arredondado (8px) – a convenção de UI mais comum; usado em botões, cartões, modais.
Pílula / Círculo (999px) – para emblemas, etiquetas, imagens de avatar e botões CTA.
Diagonal (999px / 0px alternando) – para elementos de design assimétricos criativos populares em landing pages.

Bloquear Cantos vs. Controle Individual de Cantos

Explica a diferença entre `border-radius` uniforme (por exemplo, `border-radius: 12px`) e a abreviação de quatro valores (por exemplo, `border-radius: 12px 0px 12px 0px`). Descreve quando usar o modo bloqueado (botões, cartões) vs. o modo individual (balões de fala, formas orgânicas, formas de UI personalizadas).

Compreendendo a Saída CSS

Descreve o código gerado:

css

border-radius: 12px 12px 12px 12px;

Explique a ordem: superior-esquerdo → superior-direito → inferior-direito → inferior-esquerdo (sentido horário a partir do superior-esquerdo). Observe as regras de abreviação: se todos os quatro valores forem idênticos, um único valor é suficiente (border-radius: 12px).

Casos de Uso Comuns para CSS Border Radius

Aborde aplicações práticas do mundo real:

Botões – um leve arredondamento (6–8px) melhora a percepção de clicabilidade.
Cards e contêineres – 12–16px é o padrão da indústria para UIs de SaaS.
Imagens de avatar/perfil – 50% ou 999px para cortes circulares.
Campos de entrada – arredondamento sutil (4–8px) para design de formulários moderno.
Seções hero e banners – raios assimétricos para diferenciação visual.
Tooltips e caixas de destaque – um canto afiado apontando para o elemento gatilho.
Badges e tags – formato de pílula (999px) para rótulos, categorias e indicadores de status.

CSS Border Radius e Compatibilidade com Navegadores

Observe que border-radius é suportado em todos os navegadores modernos (Chrome, Firefox, Safari, Edge) sem prefixos de fornecedor. Mencione que projetos mais antigos que exigem suporte ao IE8 podem precisar dos prefixos -webkit-border-radius e -moz-border-radius, embora estes sejam obsoletos no desenvolvimento atual.

Dicas para Usar Border Radius no Web Design

Use raios consistentes em todo o seu sistema de design (por exemplo, 8px para entradas, 12px para cards, 999px para pílulas).
Evite misturar muitos raios diferentes em uma única página — isso cria inconsistência visual.
Para UIs escaláveis, prefira valores rem ou em para que os cantos escalem com o tamanho da fonte do usuário.
Combine border-radius com overflow: hidden ao recortar elementos filhos (por exemplo, cards de imagem arredondados).
Use valores assimétricos grandes para criar formas de "blob orgânico", populares em gráficos hero de landing pages modernas.

Perguntas frequentes

O que é um gerador de CSS border radius?

Um gerador de CSS border radius é uma ferramenta online gratuita que permite ajustar visualmente o arredondamento dos cantos de elementos HTML e gera instantaneamente o código CSS border-radius correto, eliminando a necessidade de escrever ou adivinhar valores manualmente.

Como gero um CSS border radius para um círculo?

Defina todos os quatro valores de canto para 999px (ou 50% se o elemento for um quadrado perfeito). O gerador de CSS border radius oferece um preset de um clique para esta forma.

Posso definir valores de border radius diferentes para cada canto?

Sim. Desmarque a opção "Bloquear cantos juntos" no gerador e, em seguida, arraste cada um dos quatro controles deslizantes independentemente para definir valores personalizados para superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo.

Que unidades posso usar para CSS border radius?

A propriedade border-radius aceita px, %, em, rem e vw/vh. Os mais comuns na prática são px para UIs fixas e % para formas fluidas ou circulares. Este gerador gera valores em px para precisão.

Qual é a abreviação CSS para border radius?

A abreviação border-radius: TL TR BR BL define todos os quatro cantos em ordem horária, começando pelo superior-esquerdo. Se todos os quatro valores forem iguais, você pode escrever um único valor: border-radius: 12px.

O gerador de CSS border radius é gratuito?

Sim, a ferramenta é totalmente gratuita. Nenhuma conta ou inscrição é necessária. Basta ajustar os controles deslizantes, visualizar o resultado e copiar o código gerado.

O border-radius funciona em imagens?

Sim. Aplicar border-radius a uma tag arredonda seus cantos visíveis. Para garantir que o conteúdo filho (como uma imagem dentro de uma

) também seja cortado, adicione overflow: hidden ao contêiner pai.

Qual é a diferença entre border-radius e -webkit-border-radius?

-webkit-border-radius era um prefixo de fornecedor mais antigo exigido para Safari e Chrome antes de adotarem a propriedade padrão border-radius. Navegadores modernos não precisam mais dele, e você pode usar border-radius com segurança sem nenhum prefixo.

Como crio um botão em forma de pílula usando CSS border radius?

Defina border-radius para um valor grande como 999px. Isso força extremidades esquerda e direita totalmente arredondadas, independentemente da largura do botão, criando a clássica forma de pílula usada no design de UI moderno.

Posso usar CSS border radius para criar formas assimétricas?

Sim. Ao definir valores diferentes para cada canto — por exemplo, border-radius: 999px 0 999px 0 — você pode criar formas diagonais, onduladas ou orgânicas. Os controles deslizantes de canto individuais do gerador facilitam a experimentação visual antes de copiar o código.