ZenovayTools

Gerador de CSS Border Radius

Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.

Corner Radius

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

Como Usar Gerador de CSS Border Radius

  1. 1Ajuste o controle deslizante de border-radius para cada canto da caixa de pré-visualização.
  2. 2Vincule todos os cantos para arredondamento uniforme, ou desvinque para controle individual.
  3. 3Veja a pré-visualização do efeito border-radius em tempo real.
  4. 4Copie o código CSS border-radius gerado.
ZenovayAnalytics

Transforme seu tráfego em clientes.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.
Gerador de CSS Grid
Construa layouts CSS Grid com um editor visual. Defina colunas, linhas, espaçamentos e estenda células nas áreas.

Perguntas Frequentes

Como funciona o border-radius no CSS?▾
A propriedade border-radius arredonda os cantos de um elemento. Você pode definir um único valor para todos os cantos ou especificar cada canto individualmente: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo.
Posso definir valores diferentes para cada canto?▾
Sim. Clique no ícone de cadeado para desvincular os cantos e ajuste cada um de forma independente. Isso permite criar formas assimétricas como balões de fala ou abas.
Quais unidades o border-radius suporta?▾
O border-radius suporta qualquer unidade de comprimento CSS. Esta ferramenta usa pixels (px), mas você também pode usar porcentagens (%) — 50% cria um círculo perfeito em um elemento quadrado.
Como faço um círculo perfeito?▾
Defina todos os quatro valores de canto como 50% (ou metade da largura/altura do elemento em pixels). O elemento deve ser quadrado para formar um círculo verdadeiro.
Posso usar essa ferramenta no meu celular?▾
Sim, o gerador de border-radius funciona em qualquer navegador mobile moderno. Ajuste os valores dos cantos com os controles deslizantes e copie o CSS em qualquer dispositivo.
O CSS gerado funciona em todos os navegadores?▾
Sim. A propriedade border-radius é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Prefixos de fornecedor não são necessários.
Posso usar o CSS gerado com Tailwind?▾
Sim. O Tailwind tem utilitários de border-radius embutidos, como rounded-lg e rounded-full. Para valores personalizados, use a sintaxe de valor arbitrário, como rounded-[12px_24px_12px_24px], ou cole o CSS em uma classe personalizada.