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:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Gentag siden efter denne model:
