Zaoblenie okrajov bloku v CSS

Teraz sa naučíme zaokrúhľovať rohy bloku. Na to by sa mala použiť vlastnosť border-radius, ktorá prijíma hodnotu v pixeloch.

Čo znamená, že sme zadali zaoblenie, napríklad na 10px? To je polomer kruhu, ktorý možno vpísať do tohto zaoblenia. Ak máte problémy s matematikou a nie je vám jasná posledná veta - zabudnite na ňu a jednoducho vyberajte zaoblenie od oka. Pri určitej praxi to nie je problém (merací nástroj na meranie zaoblení neexistuje, prinajmenšom som o takom nepočul).

Poďme zaobliť rohy bloku nastavením zaoblenia na 10px:

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

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

Результат: