Egenskapen border-radius

Egenskapen border-radius lager avrundede hjørner for kantlinjen og bakgrunnen. Verdien for egenskapen er alle enheter for størrelser. Standardverdi: 0. Er en forkortelse for egenskapene border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaks

velger {
	border-radius: verdi;
}

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Antall	Beskrivelse
`1`	For alle hjørner samtidig.
`2`	Første verdi setter avrunding for øvre høyre og nedre venstre hjørne, andre - for øvre venstre og nedre høyre.
`3`	Første verdi setter avrunding for øvre venstre hjørne, andre - samtidig for øvre høyre og nedre venstre, og tredje - for nedre høyre hjørne.
`4`	Første verdi setter avrunding for øvre venstre hjørne, andre - for øvre høyre, tredje - for nedre høyre hjørne, og fjerde - for nedre venstre hjørne.

Elliptisk avrunding

To verdier med skråstrek setter elliptisk avrunding. Verdien før skråstreken angir horisontal avrunding, og verdiene etter skråstreken - vertikal:

velger {
	border-radius: horisontal / vertikal;
}

Hvis det angis avrundinger for flere hjørner, blir alle horisontale avrundinger listet opp før skråstreken, og alle vertikale etter den.

Eksempel

La oss sette avrunding på 10px for alle hjørner:

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

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

Eksempel

La oss se hvordan avrunding for kantlinje i form av prikker ser ut:

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

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

Eksempel

La oss sette avrunding på 10px for hjørner i en diagonal, og avrunding på 40px - for hjørner i den andre diagonalen:

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

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

Eksempel

La oss sette avrunding på 10px for øvre venstre hjørne, avrunding på 30px for nedre høyre hjørne, og avrunding på 50px - for hjørner i den andre diagonalen:

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

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

Eksempel

La oss sette forskjellige avrundinger for hvert av hjørnene:

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

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

Eksempel

La oss lage en elliptisk avrunding, ved å sette 20px for den horisontale delen av avrundingen, og 40px - for den vertikale:

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

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

Eksempel

La oss nå sette forskjellig elliptisk avrunding for alle hjørner hver for seg:

<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 du setter for en firkantet boks avrunding, som er lik halvparten av siden til kvadratet, får du en sirkel:

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

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

Eksempel

Hvis du setter avrunding, større enn siden av kvadratet, får du likevel en sirkel:

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

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

Eksempel

En sirkel kan også oppnås hvis du setter border-radius til 50% (fordelen er at ved endring av kvadratets størrelse trenger du ikke å endre avrundingen):

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

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

Eksempel

Hvis du setter border-radius i prosent for et rektangel, får du elliptisk avrunding. Hvis bredden er satt til 400px, høyden til 200px, og border-radius til 10%, er dette det samme som 40px/20px:

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

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

Eksempel

La oss sette verdien 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

Egenskapen border-radius runder av ikke bare hjørnene på kantlinjen, men også bakgrunnen:

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

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

Se også

egenskapen border,
som er en forkortelse for kantlinje