Como usar
- Escolha a Unidade: px para um raio fixo, ou % para um raio que acompanha o tamanho da caixa.
- Digite um raio para cada canto em Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo. Um canto com 0 é reto.
- Marque Cantos elípticos (um raio vertical separado) se um canto deve ser mais largo que alto, e digite o raio vertical dele.
- Copie a declaração CSS e cole-a na regra do seu elemento.
Como os quatro cantos são escritos
A propriedade border-radius recebe de um a quatro raios horizontais, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Uma lista com menos valores repete os que tem: com dois valores, o primeiro vale para os cantos superior esquerdo e inferior direito, e o segundo para os cantos superior direito e inferior esquerdo. O raio vertical é escrito depois de uma barra, na mesma ordem.
A gramática está descrita na especificação CSS Backgrounds and Borders (em inglês). Cada raio é um comprimento ou uma porcentagem da caixa, e um raio zero não precisa de unidade.
border-radius: superior-esquerdo superior-direito inferior-direito inferior-esquerdo / vertical-superior-esquerdo vertical-superior-direito vertical-inferior-direito vertical-inferior-esquerdoA forma mais curta
A ferramenta deixa de fora cada valor que a forma abreviada repetiria de qualquer jeito. Se o canto inferior esquerdo é igual ao superior direito, ele não é escrito; se o inferior direito é igual ao superior esquerdo, o terceiro valor também sai. Quatro cantos iguais viram um só valor, então 12px 12px 12px 12px é escrito 12px.
A barra só é escrita quando um raio vertical é diferente do horizontal. Sem cantos elípticos, cada raio vertical é igual ao horizontal, então nenhuma barra aparece.
Exemplo resolvido: um cartão com cantos elípticos
Defina o canto superior esquerdo como 40 px por 20 px, o superior direito como 20 px por 10 px, o inferior direito como 40 px por 20 px e o inferior esquerdo como 20 px por 10 px. Os raios horizontais são 40, 20, 40 e 20, que a forma abreviada escreve como 40px 20px. Os raios verticais são 20, 10, 20 e 10, que ela escreve como 20px 10px.
A declaração é border-radius: 40px 20px / 20px 10px;, e a visualização mostra cantos mais largos que altos.
Perguntas frequentes
Por que há dois conjuntos de números separados por uma barra?
O primeiro conjunto dá o raio horizontal de cada canto, e o conjunto depois da barra dá o raio vertical. Sem barra, um canto é um arco de círculo com o mesmo raio nas duas direções.
O que faz um raio em porcentagem?
A porcentagem é tirada da largura da caixa para o raio horizontal e da altura para o raio vertical. 50 por cento em todos os cantos dá um círculo ou uma elipse, conforme a caixa seja quadrada ou não.
Por que a ordem é superior esquerdo, superior direito, inferior direito e inferior esquerdo?
A forma abreviada segue a ordem no sentido horário que as outras propriedades de caixa usam, começando no canto superior esquerdo. Sabendo essa ordem, as formas mais curtas, com dois ou três valores, são fáceis de ler.
A ferramenta confere o raio com o tamanho da caixa?
Não. A ferramenta só confere se cada raio é um número igual ou maior que zero e se ele está dentro do limite de 1000 px ou 100 por cento. Se dois raios vizinhos somarem mais que o lado da caixa, o navegador os reduz proporcionalmente.
O que eu digito é guardado ou enviado para algum servidor?
Não. A visualização e o CSS são feitos no seu navegador. Nada é guardado nem enviado para o nosso servidor, então copie a declaração antes de sair da página.
Fontes
Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.