Eigenschap border-radius

De eigenschap border-radius creëert afgeronde hoeken voor de rand en achtergrond. De waarde van de eigenschap zijn alle eenheden voor afmetingen. Standaardwaarde: 0. Is een afkorting voor de eigenschappen border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaxis

selector {
	border-radius: waarde;
}

Aantal waarden

De eigenschap kan 1, 2, 3 of 4 waarden aannemen, gespecificeerd met een spatie:

Aantal	Beschrijving
`1`	Voor alle hoeken tegelijk.
`2`	De eerste waarde specificeert de afronding voor de bovenste rechter en onderste linker hoeken, de tweede - voor de bovenste linker en onderste rechter hoeken.
`3`	De eerste waarde specificeert de afronding voor de bovenste linker hoek, de tweede - tegelijk voor de bovenste rechter en onderste linker hoeken, en de derde - voor de onderste rechter hoek.
`4`	De eerste waarde specificeert de afronding voor de bovenste linker hoek, de tweede - voor de bovenste rechter hoek, de derde - voor de onderste rechter hoek, en de vierde - voor de onderste linker hoek.

Elliptische afronding

Twee waarden gescheiden door een schuine streep stellen een elliptische afronding in. De waarde vóór de schuine streep geeft de horizontale afronding aan, en de waarde na de schuine streep - de verticale afronding:

selector {
	border-radius: horizontaal / verticaal;
}

Als afrondingen voor meerdere hoeken worden opgegeven, dan worden vóór de schuine streep alle horizontale afrondingen opgesomd, en erna - alle verticale.

Voorbeeld

Laten we een afronding van 10px voor alle hoeken instellen:

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

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

Voorbeeld

Laten we kijken hoe afrondingen eruitzien voor een rand in de vorm van stippen:

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

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

Voorbeeld

Laten we een afronding van 10px instellen voor de hoeken van de ene diagonaal, en een afronding van 40px - voor de hoeken van de tweede diagonaal:

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

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

Voorbeeld

Laten we een afronding van 10px instellen voor de bovenste linker hoek, een afronding van 30px voor de onderste rechter hoek, en een afronding van 50px - voor de hoeken van de tweede diagonaal:

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

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

Voorbeeld

Laten we verschillende afrondingen instellen voor elk van de hoeken:

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

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

Voorbeeld

Laten we een elliptische afronding maken, door 20px in te stellen voor het horizontale gedeelte van de afronding, en 40px - voor het verticale:

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

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

Voorbeeld

Laten we nu een verschillende elliptische afronding instellen voor alle hoeken afzonderlijk:

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

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

Voorbeeld

Als je voor een vierkant blok een afronding instelt, gelijk aan de helft van de zijde van het vierkant, dan krijg je een cirkel:

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

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

Voorbeeld

Als je een afronding instelt, groter dan de zijde van het vierkant, dan krijg je nog steeds een cirkel:

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

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

Voorbeeld

Een cirkel kan ook worden verkregen door border-radius in te stellen op 50% (het voordeel is dat bij het wijzigen van de afmetingen van het vierkant je de afronding niet hoeft aan te passen):

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

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

Voorbeeld

Als je border-radius instelt in percentages voor een rechthoek, dan krijg je een elliptische afronding. Als de breedte is ingesteld op 400px, de hoogte op 200px, en border-radius op 10%, dan is dit hetzelfde als 40px/20px:

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

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

Voorbeeld

Stel de waarde van border-radius in op 50% voor een rechthoek - dan krijg je een ellips:

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

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

Voorbeeld

De eigenschap border-radius rondt niet alleen de hoekjes van de rand af, maar ook de achtergrond:

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

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

Zie ook

de eigenschap border,
dat is een verkorte eigenschap voor de rand