Vlastnosť border-radius

Vlastnosť border-radius vytvára zaoblené rohy pre okraj a pozadie. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti. Predvolená hodnota: 0. Je skratkou pre vlastnosti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

selektor {
	border-radius: hodnota;
}

Počet hodnôt

Vlastnosť môže prijať 1, 2, 3 alebo 4 hodnôt, uvedených medzerou:

Počet	Popis
`1`	Pre všetky rohy súčasne.
`2`	Prvá hodnota nastavuje zaoblenie pre pravý horný a ľavý dolný roh, druhá - pre ľavý horný a pravý dolný.
`3`	Prvá hodnota nastavuje zaoblenie pre ľavý horný roh, druhá - súčasne pre pravý horný a ľavý dolný, a tretia - pre pravý dolný roh.
`4`	Prvá hodnota nastavuje zaoblenie pre ľavý horný roh, druhá - pre pravý horný, tretia - pre pravý dolný roh, a štvrtá - pre ľavý dolný roh.

Eliptické zaoblenie

Dve hodnoty oddelené lomkou nastavujú eliptické zaoblenie. Hodnota pred lomkou určuje horizontálne zaoblenie, a hodnoty za lomkou - vertikálne:

selektor {
	border-style: horizontálne / vertikálne;
}

Ak sa nastavujú zaoblenia pre viacero rohov, tak pred lomkou sú uvedené všetky horizontálne zaoblenia, a za ňou - všetky vertikálne.

Príklad

Nastavme zaoblenie 10px pre všetky rohy:

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

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

Príklad

Pozrime sa, ako vyzerajú zaoblenia pre okraj v tvare bodiek:

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

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

Príklad

Nastavme zaoblenie v 10px pre rohy jednej uhlopriečky, a zaoblenia v 40px - pre rohy druhej uhlopriečky:

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

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

Príklad

Nastavme zaoblenie v 10px pre ľavý horný roh, zaoblenie v 30px pre pravý dolný roh, a zaoblenia v 50px - pre rohy druhej uhlopriečky:

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

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

Príklad

Nastavme rôzne zaoblenia pre každý z rohov:

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

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

Príklad

Vytvorme eliptické zaoblenie, nastavením 20px pre horizontálnu časť zaoblenia, a 40px - pre vertikálnu:

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

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

Príklad

Teraz nastavme rôzne eliptické zaoblenie pre všetky rohy oddelene:

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

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

Príklad

Ak pre štvorcový blok nastavíme zaoblenia, rovné polovici strany štvorca, vznikne kruh:

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

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

Príklad

Ak nastavíme zaoblenie, väčšie ako strana štvorca, stále vznikne kruh:

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

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

Príklad

Kruh je možné získať aj nastavením border-radius na 50% (výhoda spočíva v tom, že pri zmene veľkosti štvorca nebude treba meniť zaoblenie):

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

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

Príklad

Ak nastavíme border-radius v percentách pre obdĺžnik, vznikne eliptické zaoblenie. Ak je šírka nastavená na 400px, výška na 200px, a border-radius na 10%, je to to isté, ako keby bolo napísané 40px/20px:

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

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

Príklad

Nastavme hodnotu border-radius na 50% pre obdĺžnik - vznikne elipsa:

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

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

Príklad

Vlastnosť border-radius zaokrúhľuje nielen rohy okraja, ale aj pozadia:

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

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

Pozrite tiež

vlastnosť border,
ktorá je vlastnosťou-skratkou pre okraj