Свойство 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 та қийматни олиши mumкин, улар бўшлиқ орқали кўрсатилади:

Сон	Тасвир
`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;
}

Мисол

Агар яхлитлашни квадрат томонидан катта ўрнатилса, барibir айлана хосил бўлади:

<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,
бу чекка учун қисқартирилган свойствадир