Заоблување на границите на блокот во CSS

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

Што значи дека сме најавиле заоблување, на пример, од 10px? Тоа е радиусот на кругот, кој може да се впише во ова заоблување. Ако не сте добри по математика и не ви е јасна последната реченица - заборавајте за неа и едноставно прилагодувајте го заоблувањето според вашето око. Со одредено искуство ова не е проблем (нема мерен инструмент за мерење на заоблувања, барем јас не сум слушнал за таков).

Ајде да ги заоблиме аглите на блокот, со задавање на заоблување од 10px:

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

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

Результат: