Border Radius Generator

Sobre esta ferramenta

A propriedade border-radius arredonda os cantos de um elemento. Quando os quatro valores são iguais, usa-se uma forma abreviada com um único valor. Valores diferentes criam formas assimétricas — a pílula usa 50% em todos os cantos, a folha alterna 0% e 50%.

Clique em qualquer número de canto para digitar um valor diretamente, ou arraste o controle deslizante vinculado para alterar os quatro cantos de uma vez. Desative Bloquear todos os cantos para controlar cada canto independentemente.

Como usar

1. Insira valores nos quatro campos de canto (superior-esquerdo, superior-direito, inferior-esquerdo, inferior-direito).
2. Ative Bloquear todos os cantos para definir os quatro valores simultaneamente com o controle deslizante.
3. Alterne entre unidades px e % conforme as necessidades do design.
4. Clique em um preset (Pílula, Folha, Blob, etc.) para aplicar uma forma predefinida instantaneamente.

Casos de uso

Designers de UI usam border-radius para criar botões, cards e formas de avatar. Desenvolvedores ajustam cantos arredondados para corresponder a sistemas de design de marca. A forma pílula (50%) é usada em tags e badges. Valores assimétricos criam formas orgânicas de folha ou blob para elementos decorativos.

Perguntas frequentes

• Qual é a diferença entre px e %? — px dá um raio de canto fixo independente do tamanho do elemento. % é relativo à largura e altura do elemento — 50% em todos os cantos cria um círculo perfeito (se o elemento for quadrado).
• Posso definir raios diferentes para cada canto? — Sim. Desmarque Bloquear todos os cantos e digite valores diferentes em cada campo de canto.
• O que significa a saída abreviada? — Quando os quatro cantos são iguais, a saída é um único valor. Quando diferem, a ordem CSS é: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo.