Својство 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-radius: хоризонтално / вертикално;
}

Ако се задаваат заоблувања за повеќе агли, тогаш пред косата црта се наведуваат сите хоризонтални заоблувања, а после неа - сите вертикални.

Пример

Да поставиме заоблување од 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,
кое е својство-кратенка за границата