Lastnost border-radius

Lastnost border-radius ustvarja zaobljene vogale za obrobo in ozadje. Vrednost lastnosti so poljubne enote za velikosti. Privzeta vrednost je: 0. Je okrajšava za lastnosti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksa

selektor {
	border-radius: vrednost;
}

Število vrednosti

Lastnost lahko sprejme 1, 2, 3 ali 4 vrednosti, ločene s presledkom:

Število	Opis
`1`	Za vse vogale hkrati.
`2`	Prva vrednost določa zaokrožitev za zgornji desni in spodnji levi vogal, druga - za zgornji levi in spodnji desni.
`3`	Prva vrednost določa zaokrožitev za zgornji levi vogal, druga - hkrati za zgornji desni in spodnji levi, tretja pa - za spodnji desni vogal.
`4`	Prva vrednost določa zaokrožitev za zgornji levi vogal, druga - za zgornji desni, tretja - za spodnji desni vogal, četrta pa - za spodnji levi vogal.

Eliptično zaokroževanje

Dve vrednosti, ločeni s poševnico, nastavita eliptično zaokroževanje. Vrednost pred poševnico določa vodoravno zaokroževanje, vrednost za poševnico pa - navpično:

selektor {
	border-radius: vodoravno / navpično;
}

Če so določene zaokrožitve za več vogalov, so pred poševnico naštete vse vodoravne zaokrožitve, za njo pa - vse navpične.

Primer

Nastavimo zaokrožitev 10px za vse vogale:

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

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

Primer

Poglejmo, kako izgleda zaokroževanje za obrobo v obliki pik:

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

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

Primer

Nastavimo zaokrožitev v 10px za vogale ene diagonale in zaokrožitev v 40px - za vogale druge diagonale:

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

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

Primer

Nastavimo zaokrožitev v 10px za zgornji levi vogal, zaokrožitev v 30px za spodnji desni vogal in zaokrožitev v 50px - za vogale druge diagonale:

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

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

Primer

Nastavimo različne zaokrožitve za vsak od vogalov:

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

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

Primer

Naredimo eliptično zaokroževanje, tako da nastavimo 20px za vodoravni del zaokrožitve in 40px - za navpični:

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

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

Primer

Zdaj pa nastavimo različno eliptično zaokroževanje za vse vogale posebej:

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

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

Primer

Če za kvadratni blok nastavimo zaokrožitev, enako polovici stranice kvadrata, dobimo krog:

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

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

Primer

Če nastavimo zaokrožitev, večjo od stranice kvadrata, bomo vseeno dobili krog:

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

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

Primer

Krog lahko dobimo tudi, če nastavimo border-radius na 50% (prednost je v tem, da pri spreminjanju velikosti kvadrata ne bo treba spreminjati zaokrožitve):

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

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

Primer

Če nastavimo border-radius v odstotkih za pravokotnik, dobimo eliptično zaokroževanje. Če je širina nastavljena na 400px, višina na 200px, border-radius pa na 10%, je to enako, kot če bi bilo napisano 40px/20px:

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

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

Primer

Nastavimo vrednost border-radius na 50% za pravokotnik - dobimo elipso:

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

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

Primer

Lastnost border-radius ne zaokrožuje le vogalov obrobe, temveč tudi ozadja:

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

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

Glejte tudi

lastnost border,
ki je okrajšava za obrobo