Border-radius-ominaisuus

Ominaisuus border-radius luo pyöristetyt kulmat reunuksille ja taustalle. Ominaisuuden arvona käyvät mitkä tahansa koko-yksiköt. Oletusarvo: 0. Se on lyhenne ominaisuuksille border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaksi

valitsija {
	border-radius: arvo;
}

Arvojen määrä

Ominaisuus voi ottaa 1, 2, 3 tai 4 arvoa, jotka annetaan välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Kaikille kulmille yhtä aikaa.
`2`	Ensimmäinen arvo asettaa pyöristyksen yläoikealle ja alavasemmalle kulmille, toinen - ylävasemmalle ja alaoikealle.
`3`	Ensimmäinen arvo asettaa pyöristyksen ylävasemman kulman, toinen - samanaikaisesti yläoikealle ja alavasemmalle, ja kolmas - alaoikean kulman.
`4`	Ensimmäinen arvo asettaa pyöristyksen ylävasemman kulman, toinen - yläoikean kulman, kolmas - alaoikean kulman, ja neljäs - alavasen kulman.

Elliptinen pyöristys

Kaksi arvoa vinoviivalla erotettuna asettavat elliptisen pyöristyksen. Arvo ennen vinoviivaa osoittaa vaakatasoisen pyöristyksen, ja arvo vinoviivan jälkeen - pystytasoisen:

valitsija {
	border-radius: vaaka / pysty;
}

Jos asetetaan pyöristyksiä useille kulmille, niin ennen vinoviivaa luetellaan kaikki vaakatasoiset pyöristykset, ja sen jälkeen - kaikki pystytasoiset.

Esimerkki

Asetetaan pyöristys 10px kaikille kulmille:

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

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

Esimerkki

Katsotaan miltä pyöristykset näyttävät pisteistä koostuvalla reunuksella:

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

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

Esimerkki

Asetetaan pyöristys 10px toisen diagonaalin kulmille, ja pyöristys 40px - toisen diagonaalin kulmille:

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

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

Esimerkki

Asetetaan pyöristys 10px ylävasemmalle kulmalle, pyöristys 30px alaoikealle kulmalle, ja pyöristys 50px - toisen diagonaalin kulmille:

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

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

Esimerkki

Asetetaan erilaiset pyöristykset jokaiselle kulmalle:

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

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

Esimerkki

Tehdään elliptinen pyöristys, asettaen 20px vaakatasoiselle osalle pyöristystä, ja 40px - pystytasoiselle:

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

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

Esimerkki

Asetetaan nyt erilainen elliptinen pyöristys kaikille kulmille erikseen:

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

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

Esimerkki

Jos neliömäiselle lohkolle asetetaan pyöristys, joka on puolet neliön sivusta, saadaan ympyrä:

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

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

Esimerkki

Jos asetetaan pyöristys, joka on suurempi kuin neliön sivu, saadaan silti ympyrä:

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

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

Esimerkki

Ympyrän voi saada myös asettamalla border-radius arvoon 50% (etu siihen, että neliön koon muuttuessa ei tarvitse vaihtaa pyöristystä):

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

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

Esimerkki

Jos asetetaan border-radius prosentteina suorakaiteelle, saadaan elliptinen pyöristys. Jos leveys on 400px, korkeus 200px, ja border-radius 10%, niin se on sama kuin jos olisi kirjoitettu 40px/20px:

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

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

Esimerkki

Asetetaan arvo border-radius 50% suorakaiteelle - saadaan ellipsi:

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

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

Esimerkki

Ominaisuus border-radius pyöristää ei vain reunuksen kulmia, vaan myös taustaa:

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

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

Katso myös

ominaisuus border,
joka on reunuksen lyhenne-ominaisuus