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:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Gjenta siden etter dette eksempelet: