Gerador de Border Radius
Projete visualmente CSS border-radius com pré-visualização ao vivo e copie o código gerado.
Pré-visualização
Predefinições
Saída CSS
border-radius: 10px;
Tailwind
Sobre o Gerador de Border Radius
O Gerador de Border Radius é uma ferramenta online gratuita para projetar visualmente valores de CSS border-radius com pré-visualização ao vivo. Ajuste cada canto independentemente ou vincule-os, escolha entre formas predefinidas e copie instantaneamente o código CSS gerado para seu projeto.
Como Usar
Use os sliders para ajustar o raio de borda de cada canto, ou ative 'Vincular Todos os Cantos' para alterá-los uniformemente. Selecione uma forma predefinida para pontos de partida rápidos. Ative o modo Avançado para controle de 8 valores (raios horizontal e vertical por canto). Personalize a aparência da pré-visualização com cores de fundo e borda. Copie o CSS gerado com um clique.
Casos de Uso Comuns
- Projetar botões arredondados e componentes de card
- Criar tags e badges em formato de pílula
- Fazer containers circulares para fotos de perfil
- Projetar formas blob orgânicas para elementos decorativos
- Gerar valores consistentes de border-radius em um design system