Закръглени граници на блок в CSS

Сега ще се научим да закръгляме ъглите на блок. За това трябва да се прилага свойството border-radius, което приема стойност в пиксели.

Какво означава, че сме задали закръгляне, например, от 10px? Това е радиусът на кръга, който може да бъде вписан в това закръгляне. Ако имате затруднения с математиката и не ви е ясно последното изречение - забравете го и просто подбирайте закръглянето на око. При известен опит това не е проблем (измерителен инструмент за измерване на закръгляния не съществува, поне не съм чувал за такъв).

Нека закръглим ъглите на блок, като му зададем закръгляне от 10px:

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

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

Результат: