თვისება border-width

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

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

სინტაქსი

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

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

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

რაოდენობა	აღწერა
`1`	ტიპი ყველა მხარისთვის ერთდროულად.
`2`	პირველი მნიშვნელობა ზედა და ქვედა ნაწილისთვის, მეორე - მარცხენა და მარჯვენა საზღვრებისთვის.
`3`	პირველი მნიშვნელობა ზედა ნაწილისთვის, მეორე - მარცხენა და მარჯვენა საზღვრებისთვის, მესამე - ქვედა ნაწილისთვის.
`4`	პირველი მნიშვნელობა ზედა საზღვრისთვის, მეორე - მარჯვენა საზღვრისთვის, მესამე - ქვედა საზღვრისთვის, მეოთხე - მარცხენა საზღვრისთვის.

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

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

თვისება border-style,
რომელიც ადგენს საზღვრის გარეგნობას
თვისება border-color,
რომელიც ადგენს საზღვრის ფერს
თვისება border,
რომელიც არის შემოკლებული თვისება საზღვრისთვის