Gerador de raio de borda CSS
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
- 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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Gerador de Clip-Path CSS
Gere e analise valores de `clip-path` CSS para polígonos, círculos, elipses e formas `inset`.
Utilitários Diversos
›
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
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.