თვისება border-width

თვისება border-width ადგენს საზღვრის სისქეს ყველა მხარისთვის ერთდროულად ან ცალ-ცალკე თითოეული მხარისთვის. ის არის შემოკლებული თვისება თვისებების border-left-width, border-right-width, border-top-width, border-bottom-width.

თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული, პროცენტების გარდა, ან საკვანძო სიტყვები thin (საზღვარი 2 პიქსელში), medium (საზღვარი 4 პიქსელში) ან thick (საზღვარი 6 პიქსელში). ნაგულისხმევი მნიშვნელობა: medium.

სინტაქსი

cssსელექტორი {
  border-width: 1, 2, 3 ან 4 მნიშვნელობა;
}

მნიშვნელობების რაოდენობა

თვისებას შეუძლია მიიღოს 1, 2, 3 ან 4 მნიშვნელობა, რომელიც მითითებულია გამოტოვებით:

მაგალითი

დავაყენოთ საზღვარი ერთი პიქსელის სისქით:

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

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

Результат:

მაგალითი

დავაყენოთ საზღვარი 4 პიქსელის სისქით:

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

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

Результат:

მაგალითი

დავაყენოთ ზედა და ქვედა საზღვრის სისქე 1px-ზე, ხოლო მარჯვენა და მარცხენა - 4px-ზე:

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

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

Результат:

მაგალითი

დავაყენოთ ზედა საზღვრის სისქე 1px-ზე, მარჯვენა და მარცხენა - 4px-ზე, ხოლო ქვედა 6px-ზე:

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

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

Результат:

მაგალითი

დავაყენოთ ზედა საზღვრის სისქე 1px-ზე, მარჯვენა 4px-ზე, ქვედა - 6px-ზე, ხოლო მარცხენა 8px-ზე:

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

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

Результат:

მაგალითი

დავაყენოთ საზღვრის სისქე საკვანძო სიტყვით thin:

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

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

Результат:

მაგალითი

დავაყენოთ საზღვრის სისქე საკვანძო სიტყვით medium:

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

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

Результат:

მაგალითი

დავაყენოთ საზღვრის სისქე საკვანძო სიტყვით thick:

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

css#elem {
  border-width: thick;
  border-style: solid;
  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;
}

Результат:

იხილეთ აგრეთვე