Gerador de Border Radius CSS
Controle todos os 8 valores de border-radius visualmente.
Crie formas blob com pré-visualização em tempo real.
Sobre
O Gerador de Border Radius CSS permite controlar visualmente todos os 8 valores de border-radius (raio horizontal e vertical para cada um dos 4 cantos) e visualizar o resultado em tempo real.
Além de cantos arredondados normais, você pode criar formas blob complexas como border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — populares para decorações de seção hero. Todo o processamento é feito localmente no seu navegador.
Como Usar
Escolher uma Predefinição
Comece com uma predefinição (Círculo, Folha, Blob, etc.) para obter rapidamente uma forma base e depois ajuste com os controles deslizantes.
Ajustar Controles
Arraste os controles deslizantes horizontal e vertical para cada canto. A pré-visualização é atualizada instantaneamente.
Copiar CSS
Clique em "Copiar" para copiar o CSS gerado para a área de transferência e cole na sua folha de estilos.
Glossário
- border-radius
- Uma propriedade CSS que arredonda os cantos de um elemento. Suporta unidades px e % para cada canto independentemente.
- Raio Horizontal / Vertical
- Os dois raios de uma elipse definidos por border-radius. O separador "/" divide os valores horizontais (antes) e verticais (depois).
- Blob
- Uma forma orgânica e irregular criada definindo valores de border-radius assimétricos em todos os 8 eixos.
- clip-path
- Uma propriedade CSS para recortar elementos em formas personalizadas. Mais flexível que border-radius, mas com sintaxe mais complexa.
- Shorthand
- border-radius: 10px 20px 30px 40px — especificando todos os quatro cantos em uma única declaração. Use "/" para separar horizontal e vertical.
FAQ
- Q.Quais são os 8 valores?
- Cada um dos 4 cantos tem um raio horizontal e um vertical, totalizando 8 valores. Formato: border-radius: A B C D / E F G H.
- Q.Para que posso usar formas blob?
- Decoração de fundo em seção hero, máscaras para imagens de perfil, formatos de botão CTA, e muito mais.
- Q.Algum dado é enviado a um servidor?
- Não. Tudo é gerado localmente no seu navegador.
- Q.Funciona no IE11?
- O border-radius funciona a partir do IE9. A notação elíptica (com "/") também funciona a partir do IE9+.
- Q.Posso usar com Sass ou Less?
- Sim. O código gerado é CSS padrão, portanto funciona diretamente com Sass, Less e Stylus.
Casos de Uso
Design de Botões e Cards
Crie formas arredondadas únicas para botões e componentes de card além de círculos padrão.
Decoração de Fundo Blob
Use formas blob orgânicas para fundos de seção hero em páginas de destino.
Máscara para Foto de Perfil
Explore máscaras incomuns para fotos de perfil além do círculo ou quadrado padrão.
Aprendizado de CSS
Entenda visualmente como o border-radius funciona experimentando com os controles deslizantes.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.