Zaokrąglanie granic bloku w CSS

Teraz nauczymy się zaokrąglać rogi bloku. W tym celu należy zastosować właściwość border-radius, przyjmującą wartość w pikselach.

Co oznacza, że określiliśmy zaokrąglenie, na przykład, na 10px? To promień okręgu, który można wpisać w to zaokrąglenie. Jeśli masz problemy z matematyką i nie rozumiesz ostatniego zdania - zapomnij o nim i po prostu dobieraj zaokrąglenie na oko. Przy pewnym doświadczeniu zrobienie tego nie stanowi problemu (narzędzia pomiarowego do mierzenia zaokrągleń nie ma, przynajmniej ja o takim nie słyszałem).

Zaokrąglmy rogi bloku, ustawiając mu zaokrąglenie na 10px:

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

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

Результат: