Afrunding af blokkanter i CSS

Nu skal vi lære at runde hjørnerne på en blok. Til dette skal man anvende egenskaben border-radius, som tager en værdi i pixels.

Hvad betyder det, at vi har angivet en afrunding, for eksempel på 10px? Det er radius af en cirkel, som kan indskrives i denne afrunding. Hvis du ikke er stærk i matematik og du ikke forstår den sidste sætning - så glem den og prøv dig bare frem. Med lidt erfaring er det ikke noget problem (et måleværktøj til at måle afrundinger eksisterer ikke, i hvert fald har jeg ikke hørt om et).

Lad os runde hjørnerne på en blok ved at give den en afrunding på 10px:

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

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

Результат: