Хосияти border-style

Хосияти border-style услуби ҳудудро барои ҳама тарафҳо ҳамзамон ё алоҳида барои ҳар як тараф таъйин мекунад. Хосияти ихтисорёфта барои хосиятҳои зерин мебошад: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтаксис

интихобкунанда {
	border-style: қимат;
}

Қиматҳо

Қимат	Тавсиф
`solid`	Хати пайваста.
`dotted`	Ҳудуд ба шакли нуқтаҳо.
`dashed`	Ҳудуд ба шакли хати тиреза.
`ridge`	Ҳудуд ба шакли хати барҷаста.
`double`	Ҳудуд ба шакли хати дукарата. Барои дидани таъсир, ғафсии ҳудуд бояд ҳадди ақал `3px` бошад.
`groove`	Ҳудуди фурӯрафта.
`inset`	Ҳудуди фишурда.
`outset`	Ҳудуди баромада.
`none`	Набудани ҳудуд.

Қимати пешфарз: none.

Миқдори қиматҳо

Хосият метавонад 1, 2, 3 ё 4 қиматро қабул кунад, ки бо фосилаи холӣ ишора карда мешаванд:

Миқдор	Тавсиф
`1`	Навъ барои ҳама тарафҳо ҳамзамон.
`2`	Қимати якум барои боло ва поён, дуввум - барои ҳудудҳои чап ва рост.
`3`	Қимати якум барои боло, дуввум - барои ҳудудҳои чап ва рост, сеюм - барои поёнӣ.
`4`	Қимати якум барои ҳудуди болоӣ, дуввум - барои рост, сеюм - барои поёнӣ, чаҳорум - барои ҳудуди чап.

Намуна . Қимати solid

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати dotted

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати dashed

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати ridge

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати double

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати groove

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна . Қимати inset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуna . Қимати outset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна

Дар ин намуна навъҳои гуногуни ҳудуд барои тарафҳои гуногуни унсурҳо таъйин карда шудаанд:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Намуна

Ва акнун барои тарафҳои гуногуни унсур инчунин ғафсии гуногуни ҳудуд ва ранг он таъйин карда шудааст:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Намуна

Акнун барои ҳудуди болоӣ ва поёнӣ навъи solid, барои рост ва чап - dotted таъйин карда шудааст:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ҳамчунин нигаред

хосияти border-color,
ки рангҳои ҳудудро таъйин мекунад
хосияти border-width,
ки ғафсии ҳудудро таъйин мекунад
хосияти border,
ки хосияти ихтисорёфта барои ҳудуд мебошад