Хосияти 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,
ки хосияти ихтисорёфта барои ҳудуд мебошад