Уласцівасць 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,
якое з'яўляецца ўласцівасцю-скарачэннем для мяжы