Egenskapen border-radius

Egenskapen border-radius skapar rundade hörn för kantlinjen och bakgrunden. Värdet på egenskapen är vilka enheter för storlekar som helst. Standardvärde: 0. Är en förkortning för egenskaperna border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

selektor {
	border-radius: värde;
}

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Antal	Beskrivning
`1`	För alla hörn samtidigt.
`2`	Första värdet sätter rundningen för övre högra och nedre vänstra hörnet, andra - för övre vänstra och nedre högra.
`3`	Första värdet sätter rundningen för övre vänstra hörnet, andra - samtidigt för övre högra och nedre vänstra, och tredje - för nedre högra hörnet.
`4`	Första värdet sätter rundningen för övre vänstra hörnet, andra - för övre högra, tredje - för nedre högra hörnet, och fjärde - för nedre vänstra hörnet.

Elliptisk rundning

Två värden med snedstreck sätter elliptisk rundning. Värdet före snedstrecket anger horisontell rundning, och värdena efter snedstrecket - vertikal:

selektor {
	border-style: horisontell / vertikal;
}

Om rundningar anges för flera hörn, så listas alla horisontella rundningar före snedstrecket, och alla vertikala efter det.

Exempel

Låt oss sätta rundningen 10px för alla hörn:

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

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

Exempel

Låt oss se hur rundningar ser ut för kantlinjen i form av punkter:

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

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

Exempel

Låt oss sätta rundningen till 10px för hörn i en diagonal, och rundningar till 40px - för hörn i den andra diagonalen:

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

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

Exempel

Låt oss sätta rundningen till 10px för övre vänstra hörnet, rundningen till 30px för nedre högra hörnet, och rundningar till 50px - för hörn i den andra diagonalen:

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

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

Exempel

Låt oss sätta olika rundningar för varje av hörnen:

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

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

Exempel

Låt oss göra en elliptisk rundning, genom att sätta 20px för den horisontella delen av rundningen, och 40px - för den vertikala:

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

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

Exempel

Och nu sätter vi olika elliptiska rundningar för alla hörn var för sig:

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

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

Exempel

Om man för ett kvadratiskt block sätter rundningar, lika med hälften av kvadratens sida, så blir det en cirkel:

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

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

Exempel

Om man sätter en rundning som är större än sidan på kvadraten, så blir det ändå en cirkel:

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

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

Exempel

En cirkel kan också fås om man sätter border-radius till 50% (fördelen är att man inte behöver ändra rundningen när kvadratens storlek ändras):

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

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

Exempel

Om man sätter border-radius i procent för en rektangel, så blir det en elliptisk rundning. Om bredden är satt till 400px, höjden till 200px, och border-radius till 10%, så är det samma sak som om det stått 40px/20px:

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

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

Exempel

Låt oss sätta värdet border-radius till 50% för en rektangel - det blir en ellips:

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

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

Exempel

Egenskapen border-radius rundar inte bara hörnen på kantlinjen, utan även bakgrunden:

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

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

Se även

egenskapen border,
som är en förkortningsegenskap för kantlinjen