Avrunding av blokkgrenser i CSS

Nå skal vi lære å avrunde hjørnene på en blokk. For dette bør man bruke egenskapen border-radius, som tar en verdi i piksler.

Hva betyr det at vi har spesifisert en avrunding, for eksempel, på 10px? Dette er radiusen til sirkelen, som kan skrives inn i denne avrundingen. Hvis du ikke er god i matematikk og du ikke forstår setningen over - glem den og bare juster avrundingen med øyet. Med litt erfaring er dette ikke noe problem (måleinstrument for å måle avrundinger eksisterer ikke, i hvert fall har jeg ikke hørt om noe slikt).

La oss avrunde hjørnene på en blokk ved å gi den en avrunding på 10px:

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

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

Результат: