Gerador de raio de borda CSS

Todas as ferramentas

Opções

Estado
Inativo

Visualização ao vivo

O que é o gerador de raio de borda CSS?

Esta ferramenta ajuda a gerar valores CSS de raio de borda para cantos arredondados.

É útil para botões, cards, inputs, modais, avatares e componentes modernos de UI.

Como usar o gerador de raio de borda CSS

  1. Ajuste os valores do raio do canto usando as entradas ou controles deslizantes.
  2. Mantenha todos os cantos vinculados ou edite cada canto separadamente.
  3. Copie o valor do raio da borda gerado ou a regra CSS completa.
  4. Cole um valor de raio de borda existente para analisá-lo e editá-lo.

Dicas

  • Use um valor para cantos arredondados uniformemente.
  • Use quatro valores para formas mais orgânicas ou assimétricas.
  • Cantos arredondados geralmente combinam bem com sombras e gradientes de caixa.
  • Valores altos de border-radius são úteis para formatos de pill e cápsula.

Guias relacionados

Entenda o workflow por trás desta ferramenta e o que revisar depois.

Verificações de border-radius antes de arredondar geometria

Raios dependem das dimensões e interagem com borders, overflow, imagens, foco e superfícies aninhadas.

Teste dimensões variáveis

Verifique elementos baixos, altos, estreitos, fluidos e dinâmicos, pois porcentagens e raios grandes mudam.

Revise cantos elípticos

Verifique raios horizontais e verticais, sintaxe slash, assimetria e normalização quando excedem a caixa.

Coordene superfícies aninhadas

Alinhe raios pai e filho com padding e border width para evitar lacunas desiguais entre fundos e painéis.

Preserve o foco visível

Teste outlines, shadows, overflow, forced colors e estados interativos de controles arredondados.

Privacidade e uso

Verificações rápidas sem conta

Toolinix foi feito para tarefas curtas de desenvolvimento: cole uma amostra segura, revise o resultado, copie o que precisa e siga em frente.

Sem login

Você pode usar as ferramentas sem criar conta, assinar newsletter ou salvar um workspace.

Local quando possível

Formatadores, geradores, codificadores e utilitários de texto geralmente rodam no navegador. Diagnósticos de rede podem precisar de uma consulta assistida pelo servidor para verificar URLs, domínios ou IPs públicos.

Não cole segredos

Não cole senhas de produção, chaves privadas, tokens de acesso, dados de clientes ou dados regulados em ferramentas online, a menos que sua própria política de segurança permita.

Ferramentas relacionadas

Você também pode achar essas ferramentas úteis.

Perguntas frequentes sobre raio de borda CSS

Posso editar todos os quatro cantos separadamente?
Sim. Desative os cantos vinculados e defina cada canto individualmente.
Esta ferramenta pode analisar CSS de raio de borda existente?
Sim. Cole um valor border-radius ou uma declaração CSS completa de border-radius.
Suporta valores px e percentuais?
Sim. Você pode usar valores como 16px ou 50%.
A visualização está ao vivo?
Sim. A visualização é atualizada conforme você altera os valores.