Zaoblení okrajů bloku v CSS

Nyní se naučíme zaoblovat rohy bloku. K tomu slouží vlastnost border-radius, která přijímá hodnotu v pixelech.

Co znamená, když jsme zadali zaoblení, třeba 10px? Je to poloměr kruhu, který lze do tohoto zaoblení vepsat. Pokud vám matematika nejde a poslední věta vám není jasná - zapomeňte na ni a jednoduše nastavujte zaoblení od oka. S jistou praxí to není problém (měřicí nástroj pro měření zaoblení neexistuje, pokud o nějakém nevím).

Pojďme zaoblit rohy bloku nastavením zaoblení na 10px:

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

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

Результат: