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 касиети,
бул чегин үчүн кыскартылган касиет