Propriedade border-radius

A propriedade border-radius cria cantos arredondados para a borda e o fundo. O valor da propriedade são quaisquer unidades de tamanho. Valor padrão: 0. É uma abreviação para as propriedades border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaxe

seletor {
	border-radius: valor;
}

Número de valores

A propriedade pode aceitar 1, 2, 3 ou 4 valores, especificados com espaço:

Quantidade	Descrição
`1`	Para todos os cantos simultaneamente.
`2`	O primeiro valor define o arredondamento para os cantos superior direito e inferior esquerdo, o segundo - para os cantos superior esquerdo e inferior direito.
`3`	O primeiro valor define o arredondamento para o canto superior esquerdo, o segundo - simultaneamente para os cantos superior direito e inferior esquerdo, e o terceiro - para o canto inferior direito.
`4`	O primeiro valor define o arredondamento para o canto superior esquerdo, o segundo - para o canto superior direito, o terceiro - para o canto inferior direito, e o quarto - para o canto inferior esquerdo.

Arredondamento elíptico

Dois valores separados por barra definem um arredondamento elíptico. O valor antes da barra especifica o arredondamento horizontal, e os valores após a barra - o vertical:

seletor {
	border-radius: horizontal / vertical;
}

Se forem definidos arredondamentos para vários cantos, então antes da barra são listados todos os arredondamentos horizontais, e após ela - todos os verticais.

Exemplo

Vamos definir um arredondamento de 10px para todos os cantos:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos ver como ficam os arredondamentos para uma borda com estilo pontilhado:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir um arredondamento de 10px para os cantos de uma diagonal, e arredondamentos de 40px - para os cantos da segunda diagonal:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir um arredondamento de 10px para o canto superior esquerdo, um arredondamento de 30px para o canto inferior direito, e arredondamentos de 50px - para os cantos da segunda diagonal:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir arredondamentos diferentes para cada um dos cantos:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos fazer um arredondamento elíptico, definindo 20px para a parte horizontal do arredondamento, e 40px - para a vertical:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Exemplo

Agora vamos definir um arredondamento elíptico diferente para todos os cantos individualmente:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Exemplo

Se definirmos para um bloco quadrado um arredondamento igual à metade do lado do quadrado, obteremos um círculo:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Exemplo

Se definirmos um arredondamento maior que o lado do quadrado, ainda assim obteremos um círculo:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Exemplo

Também é possível obter um círculo definindo border-radius como 50% (a vantagem é que ao alterar as dimensões do quadrado não será necessário mudar o arredondamento):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Exemplo

Se definirmos border-radius em porcentagem para um retângulo, obteremos um arredondamento elíptico. Se a largura for 400px, a altura 200px, e o border-radius for 10%, é o equivalente a escrever 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Exemplo

Vamos definir o valor de border-radius como 50% para um retângulo - obteremos uma elipse:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Exemplo

A propriedade border-radius arredonda não apenas os cantos da borda, mas também do fundo:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Veja também

a propriedade border,
que é uma propriedade abreviada para a borda