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

cssseletor {
  border-radius: valor;
}

Número de valores

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

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:

cssseletor {
  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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Exemplo

Vamos definir arredondamentos diferentes para cada um dos cantos:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Veja também