A blokk szegélyeinek lekerekítése CSS-ben

Most megtanuljuk, hogyan kell lekerekíteni a blokk sarkait. Ehhez a border-radius tulajdonságot kell használni, amely pixelben vesz fel értéket.

Mit jelent az, ha például 10px lekerekítést adtunk meg? Ez annak a körnek a sugara, amely ebbe a lekerekítésbe írható. Ha nem boldogulsz a matematikával és nem érted az utolsó mondatot - felejtsd el, és csak szemre válaszd ki a lekerekítést. Egy kevés gyakorlattal ez nem probléma (mérőeszköz a lekerekítések mérésére nem létezik, legalábbis én nem hallottam ilyenről).

Kerekítsük lek a blokk sarkait, 10px lekerekítést beállítva:

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

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

Результат: