Vlastnost border-radius

Vlastnost border-radius vytváří zaoblené rohy pro ohraničení a pozadí. Hodnotou vlastnosti jsou libovolné jednotky pro velikosti. Výchozí hodnota: 0. Je zkratkou pro vlastnosti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaxe

selektor {
	border-radius: hodnota;
}

Počet hodnot

Vlastnost může přijímat 1, 2, 3 nebo 4 hodnot, uvedených mezerou:

Počet	Popis
`1`	Pro všechny rohy současně.
`2`	První hodnota nastavuje zaoblení pro horní pravý a dolní levý roh, druhá - pro horní levý a dolní pravý.
`3`	První hodnota nastavuje zaoblení pro horní levý roh, druhá - současně pro horní pravý a dolní levý, a třetí - pro dolní pravý roh.
`4`	První hodnota nastavuje zaoblení pro horní levý roh, druhá - pro horní pravý, třetí - pro dolní pravý roh, a čtvrtá - pro dolní levý roh.

Eliptické zaoblení

Dvě hodnoty oddělené lomítkem nastavují eliptické zaoblení. Hodnota před lomítkem určuje horizontální zaoblení a hodnoty za lomítkem - vertikální:

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

Pokud jsou zadána zaoblení pro více rohů, pak před lomítkem jsou uvedena všechna horizontální zaoblení a za ním - všechna vertikální.

Příklad

Nastavme zaoblení 10px pro všechny rohy:

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

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

Příklad

Podívejme se, jak vypadá zaoblení pro ohraničení v podobě teček:

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

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

Příklad

Nastavme zaoblení na 10px pro rohy jedné diagonály a zaoblení na 40px - pro rohy druhé diagonály:

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

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

Příklad

Nastavme zaoblení na 10px pro horní levý roh, zaoblení na 30px pro dolní pravý roh a zaoblení na 50px - pro rohy druhé diagonály:

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

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

Příklad

Nastavme různá zaoblení pro každý z rohů:

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

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

Příklad

Vytvořme eliptické zaoblení, nastavením 20px pro horizontální část zaoblení a 40px - pro vertikální:

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

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

Příklad

A nyní nastavme různé eliptické zaoblení pro všechny rohy zvlášť:

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

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

Příklad

Pokud pro čtvercový blok nastavíme zaoblení, rovné polovině strany čtverce, získáme kruh:

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

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

Příklad

Pokud nastavíme zaoblení větší než strana čtverce, stejně získáme kruh:

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

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

Příklad

Kruh lze také získat, pokud nastavíme border-radius na 50% (výhoda spočívá v tom, že při změně velikosti čtverce nebude nutné měnit zaoblení):

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

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

Příklad

Pokud nastavíme border-radius v procentech pro obdélník, získáme eliptické zaoblení. Pokud je šířka nastavena na 400px, výška na 200px a border-radius na 10%, je to stejné, jako kdyby bylo napsáno 40px/20px:

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

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

Příklad

Nastavme hodnotu border-radius na 50% pro obdélník - získáme elipsu:

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

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

Příklad

Vlastnost border-radius zaobluje nejen rohy ohraničení, ale i pozadí:

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

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

Viz také

vlastnost border,
která je zkratkovou vlastností pro ohraničení