Arredondamento de bordas de bloco em CSS

Agora vamos aprender a arredondar os cantos de um bloco. Para isso, devemos usar a propriedade border-radius, que aceita um valor em pixels.

O que significa termos especificado um arredondamento, por exemplo, de 10px? Este é o raio do círculo que pode ser inscrito neste arredondamento. Se você não é bom em matemática e não entendeu a última frase - esqueça-a e simplesmente ajuste o arredondamento visualmente. Com um pouco de experiência, isso não é um problema (não existe um instrumento de medição para medir arredondamentos, pelo menos eu nunca ouvi falar de um).

Vamos arredondar os cantos de um bloco, definindo um arredondamento de 10px:

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

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

Результат: