Gerador de Raio de Borda
Crie e visualize visualmente as propriedades CSS de border-radius.
CSS Gerado
Ajuste o arredondamento de cada canto
Visualizar
Visualize o efeito de raio de borda gerado
Visualizar
CSS Gerado
border-radius: 20px;Exemplos
Clique nos estilos de raio de borda predefinidos para aplicá-los
Propriedades de Raio de Borda
Ordem das Propriedades
A propriedade border-radius se aplica no sentido horário: superior-esquerdo → superior-direito → inferior-direito → inferior-esquerdo
Propriedades Abreviadas
- •
border-radius: 10px;- Aplica-se a todos os quatro cantos - •
border-radius: 10px 20px;- O primeiro se aplica ao superior-esquerdo e inferior-direito, o segundo ao superior-direito e inferior-esquerdo - •
border-radius: 10px 20px 30px;- O primeiro se aplica ao superior-esquerdo, o segundo ao superior-direito e inferior-esquerdo, o terceiro ao inferior-direito - •
border-radius: 10px 20px 30px 40px;- Aplica-se ao superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo em ordem
Dicas de Uso
- • Use 50% para criar um círculo perfeito
- • 4-8px é tipicamente bom para botões
- • 8-16px é comum para cartões e painéis
- • Raio assimétrico pode criar efeitos de design únicos