Omadus border-radius

Omadus border-radius loob ümardatud nurgad piirile ja taustale. Omaduse väärtuseks on suvalised mõõtühikud suuruste jaoks. Vaikeväärtus: 0. See on lühend omaduste border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius jaoks.

Süntaks

valija {
	border-radius: väärtus;
}

Väärtuste arv

Omadus võib võtta 1, 2, 3 või 4 väärtust, mis on eraldatud tühikuga:

Arv	Kirjeldus
`1`	Kõikide nurkade jaoks korraga.
`2`	Esimene väärtus määrab ümarduse ülemise parema ja alumise vasaku nurga jaoks, teine - ülemise vasaku ja alumise parema jaoks.
`3`	Esimene väärtus määrab ümarduse ülemise vasaku nurga jaoks, teine - korraga ülemise parema ja alumise vasaku jaoks, ja kolmas - alumise parema nurga jaoks.
`4`	Esimene väärtus määrab ümarduse ülemise vasaku nurga jaoks, teine - ülemise parema jaoks, kolmas - alumise parema nurga jaoks, ja neljas - alumise vasaku nurga jaoks.

Elliptiline ümardamine

Kaks väärtust kaldkriipsu abil määravad elliptilise ümardamise. Väärtus enne kaldkriipsu määrab horisontaalse ümarduse, ja väärtused pärast kaldkriipsu - vertikaalse:

valija {
	border-style: horisontaalne / vertikaalne;
}

Kui on määratud ümardused mitme nurga jaoks, siis enne kaldkriipsu loetletakse kõik horisontaalsed ümardused, ja pärast seda - kõik vertikaalsed.

Näide

Määrame ümarduse 10px kõikide nurkade jaoks:

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

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

Näide

Vaatame, kuidas näevad välja ümardused punktiirea puhul:

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

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

Näide

Määrame ümarduse 10px ühe diagonaali nurkadele, ja ümarduse 40px - teise diagonaali nurkadele:

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

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

Näide

Määrame ümarduse 10px ülemise vasaku nurga jaoks, ümarduse 30px alumise parema nurga jaoks, ja ümardused 50px - teise diagonaali nurkadele:

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

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

Näide

Määrame erinevad ümardused iga nurga jaoks:

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

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

Näide

Teeme elliptilise ümarduse, määrates 20px horisontaalse osa jaoks, ja 40px - vertikaalse jaoks:

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

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

Näide

Nüüd määrame erineva elliptilise ümarduse kõikidele nurkadele eraldi:

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

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

Näide

Kui panna ruudukujulise ploki jaoks ümarduseks väärtus, mis on võrdne poolega ruudu küljest, siis saadakse ring:

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

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

Näide

Kui panna ümarduseks väärtus, mis on suurem kui ruudu külg, siis saadakse ikkagi ring:

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

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

Näide

Ringi saab ka siis, kui määrata border-radius väärtuseks 50% (eelis on selles, et ruudu mõõtmete muutmisel ei pea muutma ümardust):

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

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

Näide

Kui määrata border-radius protsentides ristküliku jaoks, siis saadakse elliptiline ümardus. Kui laius on 400px, kõrgus 200px, ja border-radius väärtusega 10%, siis on see sama, kui oleks kirjutatud 40px/20px:

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

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

Näide

Määrame väärtuse border-radius väärtuseks 50% ristküliku jaoks - saame ellipsi:

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

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

Näide

Omadus border-radius ümardab mitte ainult piiri nurki, vaid ka tausta:

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

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

Vaata ka

omadus border,
mis on piiri lühendomadus