Egenskaben border-radius

Egenskaben border-radius skaber afrundede hjørner for rammen og baggrunden. Værdien af egenskaben er enhver enhed for størrelser. Standardværdi: 0. Er en forkortelse for egenskaberne border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaks

selektor {
	border-radius: værdi;
}

Antal værdier

Egenskaben kan tage 1, 2, 3 eller 4 værdier, angivet med mellemrum:

Antal	Beskrivelse
`1`	For alle hjørner samtidigt.
`2`	Første værdi angiver afrunding for øverste højre og nederste venstre hjørne, anden - for øverste venstre og nederste højre.
`3`	Første værdi angiver afrunding for øverste venstre hjørne, anden - samtidigt for øverste højre og nederste venstre, og tredje - for nederste højre hjørne.
`4`	Første værdi angiver afrunding for øverste venstre hjørne, anden - for øverste højre, tredje - for nederste højre hjørne, og fjerde - for nederste venstre hjørne.

Elliptisk afrunding

To værdier med skråstreg indstiller elliptisk afrunding. Værdien før skråstreg angiver horisontal afrunding, og værdierne efter skråstreg - vertikal afrunding:

selektor {
	border-style: horisontal / vertikal;
}

Hvis der angives afrundinger for flere hjørner, så opregnes alle horisontale afrundinger før skråstreg, og alle vertikale afrundinger efter den.

Eksempel

Lad os indstille en afrunding på 10px for alle hjørner:

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

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

Eksempel

Lad os se, hvordan afrunding ser ud for en ramme bestående af prikker:

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

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Eksempel

Lad os indstille en afrunding på 10px for hjørner i den ene diagonal, og en afrunding på 40px - for hjørner i den anden diagonal:

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

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

Eksempel

Lad os indstille en afrunding på 10px for øverste venstre hjørne, en afrunding på 30px for nederste højre hjørne, og en afrunding på 50px - for hjørner i den anden diagonal:

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

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Eksempel

Lad os indstille forskellige afrundinger for hvert af hjørnerne:

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

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Eksempel

Lad os lave en elliptisk afrunding ved at indstille 20px for den horisontale del af afrundingen, og 40px - for den vertikale:

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

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Eksempel

Lad os nu indstille forskellig elliptisk afrunding for alle hjørner hver for sig:

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

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Eksempel

Hvis man for en firkantet blok indstiller en afrunding, der er lig med halvdelen af firkantens side, får man en cirkel:

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

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Eksempel

Hvis man indstiller en afrunding, der er større end siden af firkanten, får man alligevel en cirkel:

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

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Eksempel

Man kan også få en cirkel, hvis man indstiller border-radius til 50% (fordelen er, at man ikke behøver at ændre afrundingen, når størrelsen af firkanten ændres):

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

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Eksempel

Hvis man indstiller border-radius i procent for et rektangel, får man en elliptisk afrunding. Hvis bredden er angivet til 400px, højden til 200px, og border-radius til 10%, så svarer det til, at der stod 40px/20px:

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

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Eksempel

Lad os indstille værdien border-radius til 50% for et rektangel - vi får en ellipse:

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

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Eksempel

Egenskaben border-radius runder ikke kun af på hjørnerne af rammen, men også på baggrunden:

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

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Se også

egenskaben border,
som er en sammentrækningsegenskab for rammen