Softonic

Gerador de Raio de Borda CSS

Etapa 1 / 2 Gerar CSS
Resultados

border-radius parece simples até você tentar explicar por que 50% em um quadrado dá um círculo, mas 50% em um retângulo dá um oval. Este gerador permite inserir um valor para cada um dos quatro cantos, escolher entre px, % e rem e copiar a forma abreviada exata que ele produz. Útil para formas de botões, cantos de cartões, botões em forma de pílula e cantos assimétricos.

Como construir um border-radius

  1. 1

    Defina cada canto

    Insira um raio para os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.

  2. 2

    Escolha a unidade

    Pixels (tamanho fixo), porcentagem (relativo ao elemento) ou rem (relativo ao tamanho da fonte raiz).

  3. 3

    Gere o CSS

    Pressione Generate CSS para criar a forma abreviada.

  4. 4

    Copie a regra

    Copie a forma abreviada de `border-radius` e cole-a na sua folha de estilos.

Ordem do atalho

border-radius: superior-esquerdo superior-direito inferior-direito inferior-esquerdo;

Igual a margem/padding: no sentido horário começando pelo superior-esquerdo. Valores omitidos refletem o canto oposto. Assim, border-radius: 10px 20px; significa 10px superior-esquerdo e inferior-direito, 20px superior-direito e inferior-esquerdo.

O que este gerador não faz

Ele define um raio por canto, então nunca produz cantos elípticos (a forma de dois valores com barra, como border-radius: 20px 10px / 5px 15px;) nem propriedades expandidas como border-top-left-radius. Se precisar delas, escreva o CSS manualmente.

Porcentagem vs. pixels

Unidade Comportamento
px Fixo, não escala com o tamanho do elemento
% Porcentagem da largura do elemento (horizontal) e altura (vertical)
em Escala com o tamanho da fonte do elemento
rem Escala com o tamanho da fonte raiz

50% em um elemento quadrado = círculo. Em um retângulo 200x100, 50% = 100px de raio horizontal + 50px vertical = elipse.

Formas comuns

Forma CSS
Círculo (quadrado) border-radius: 50%;
Pílula border-radius: 9999px; (qualquer valor >= metade da altura)
Cartão arredondado border-radius: 8px; ou 12px
Balão de chat border-radius: 18px 18px 0 18px; (cauda no inferior-direito)
Sutil border-radius: 2px; ou 4px

A regra “metade da altura” para pílulas

Um botão em forma de pílula é um retângulo onde as extremidades horizontais são semicírculos perfeitos. Para conseguir isso de forma confiável, defina border-radius para pelo menos metade da altura do elemento. Usar 9999px (ou qualquer valor muito grande) é seguro porque o navegador limita o raio à geometria real.

Interação com overflow

border-radius apenas recorta o fundo, a borda e a sombra da caixa por padrão. Para recortar elementos filhos (imagens, elementos aninhados) na forma arredondada, adicione:

overflow: hidden;

ou use isolation: isolate + overflow: hidden para também conter contextos de empilhamento.

Nota de acessibilidade

Não há problema de acessibilidade com o border-radius em si, mas o arredondamento extremo em elementos interativos (pílulas, chips) não deve diminuir o alvo de toque. Mantenha os botões com pelo menos 44x44 px (recomendação WCAG) independentemente do arredondamento dos cantos.

Perguntas frequentes

Porque o border-radius percentual é medido como “% da largura” horizontalmente e “% da altura” verticalmente, em um elemento não quadrado isso produz uma elipse. Para um círculo, o elemento deve ser quadrado ou usar valores em pixels que correspondam às dimensões do elemento.

Apenas o fundo, a borda e a sombra da caixa por padrão. Elementos filhos não são recortados a menos que você também adicione overflow: hidden ao pai.

É animável entre valores numéricos: transition: border-radius 200ms; funciona para pixels e porcentagens. Animar entre um atalho elíptico complexo e um raio simples pode produzir quadros intermediários surpreendentes; teste e simplifique os estados inicial/final se parecer estranho.

A especificação não define um limite, mas os navegadores limitam o raio efetivo à metade da borda mais curta do elemento. Usar border-radius: 9999px em um botão de 40px de altura produz uma pílula, o navegador limita silenciosamente para 20px.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa, decodificado 8 bits por vez.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.