Gerador de raio de borda CSS
Opções
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
- Ajuste os valores do raio do canto usando as entradas ou controles deslizantes.
- Mantenha todos os cantos vinculados ou edite cada canto separadamente.
- Copie o valor do raio da borda gerado ou a regra CSS completa.
- 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.
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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.