Хосияти border-style

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

Синтаксис

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

Қиматҳо

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

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

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

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

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

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

Намуна

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

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

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

Результат:

Намуна

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

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

css#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 таъйин карда шудааст:

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

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

Результат:

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

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