Zaokroževanje robov bloka v CSS

Zdaj se bomo naučili zaokrožiti vogale bloka. Za to uporabimo lastnost border-radius, ki sprejme vrednost v slikovnih pikah.

Kaj pomeni, da smo določili zaokroževanje, na primer, na 10px? To je polmer kroga, ki ga lahko vpišemo v to zaokroževanje. Če vam matematika ne gre in vam je zadnji stavek nerazumljiv - pozabite nanj in preprosto izberite zaokroževanje na oko. Z določenimi izkušnjami to ni težava (merilnega orodja za merjenje zaokroževanja ni, vsaj jaz nisem slišal zanj).

Zaokrožimo vogale bloku tako, da mu določimo zaokroževanje na 10px:

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

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

Результат: