Скругленне межаў блока ў CSS

Зараз мы навучымся скругліваць рожкі у блока. Для гэтага варта ўжываць ўласцівасць border-radius, якая прымае значэнне ў пікселях.

Што азначае тое, што мы паказалі скругленне, напрыклад, у 10px? Гэта радыўс круга, які можна ўпісаць у гэтае скругленне. Калі у вас кепска з матэматыкай і вам не зразумела апошняе сказанне - забудзьце пра яго і проста падбірайце скругленне на вока. Пры пэўным досведзе гэта зрабіць не праблема (вымяральнага інструмента для вымярэння скругленняў не існуе, па меншай меры я аб такім не чуў).

Давайце скруглім рожкі блоку, задаўшы яму скругленне ў 10px:

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

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

Результат: