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 հատկությունը,
որը եզրագծի համար հապավում հանդիսացող հատկություն է