Свойство border-radius

Свойството border-radius създава заоблени ъгли за границата и фона. Стойност на свойството са всякакви мерни единици за размери. Стойност по подразбиране: 0. Това е съкращение за свойствата border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор {
	border-radius: стойност;
}

Брой стойности

Свойството може да приема 1, 2, 3 или 4 стойности, посочвани чрез интервал:

Брой	Описание
`1`	За всички ъгли едновременно.
`2`	Първата стойност задава заоблянето за горния десен и долния ляв ъгъл, втората - за горния ляв и долния десен.
`3`	Първата стойност задава заоблянето за горния ляв ъгъл, втората - едновременно за горния десен и долния ляв, а третата - за долния десен ъгъл.
`4`	Първата стойност задава заоблянето за горния ляв ъгъл, втората - за горния десен, третата - за долния десен ъгъл, а четвъртата - за долния ляв ъгъл.

Елиптично заобляне

Две стойности чрез наклонена черта задават елиптично заобляне. Стойността преди наклонената черта указва хоризонталното заобляне, а стойностите след наклонената черта - вертикалното:

селектор {
	border-style: хоризонтално / вертикално;
}

Ако се задават заобляния за няколко ъгъла, то преди наклонената черта се изброяват всички хоризонтални заобляния, а след нея - всички вертикални.

Пример

Задаваме заобляне 10px за всички ъгли:

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

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

Пример

Да видим как изглеждат заоблянията за граница под формата на точки:

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

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

Пример

Задаваме заобляне от 10px за ъглите на един диагонал, и заобляния от 40px - за ъглите на втория диагонал:

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

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

Пример

Задаваме заобляне от 10px за горния ляв ъгъл, заобляне от 30px за долния десен ъгъл, и заобляния от 50px - за ъглите на втория диагонал:

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

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

Пример

Задаваме различни заобляния за всеки от ъглите:

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

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

Пример

Нека направим елиптично заобляне, като зададем 20px за хоризонталната част на заоблянето, а 40px - за вертикалната:

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

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

Пример

А сега задаваме различно елиптично заобляне за всички ъгли поотделно:

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

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

Пример

Ако на квадратен блок се зададе заобляне, равно на половината от страната на квадрата, се получава кръг:

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

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

Пример

Ако се зададе заобляне, по-голямо от страната на квадрата, пак се получава кръг:

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

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

Пример

Кръг може да се получи и ако се зададе border-radius на 50% (предимството е, че при промяна на размерите на квадрата няма да се налага промяна на заоблянето):

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

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

Пример

Ако се зададе border-radius в проценти за правоъгълник, се получава елиптично заобляне. Ако ширината е зададена в 400px, височината в 200px, а border-radius на 10%, това е все едно да е написано 40px/20px:

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

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

Пример

Задаваме стойност border-radius на 50% за правоъгълник - получава се елипса:

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

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

Пример

Свойството border-radius заобля не само ъглите на границата, но и на фона:

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

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

Вижте също

свойството border,
което е свойство-съкращение за границата