Својство 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,
које је својство-скраћеница за оквир