თვისება border-color

თვისება border-color ადგენს საზღვრის ფერს ყველა მხარისთვის ერთდროულად ან ცალ-ცალკე თითოეული მხარისთვის. თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ფერის ერთეული. ნაგულისხმევი მნიშვნელობა: იგივე ფერი, რაც ბლოკის ტექსტს აქვს.

თვისება არის შემოკლებული თვისება შემდეგი თვისებებისთვის: border-left-color, border-right-color, border-top-color, border-bottom-color.

სინტაქსი

სელექტორი {
	border-color: ფერი;
}

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

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

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

მაგალითი

მოდით, ბლოკის საზღვარი გავაწითლოთ:

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

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

მაგალითი

მივანიჭოთ წითელი საზღვარი ზედა და ქვედა მხარეს, ხოლო ცისფერი მარჯვენა და მარცხენა მხარეს:

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

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

მაგალითი

მივანიჭოთ წითელი საზღვარი ზედა მხარეს, ცისფერი მარჯვენა მხარეს, მწვანე ქვედა მხარეს, შავი მარცხენა მხარეს:

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

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green 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-color-ში - ის აღებული იქნება თვისებიდან color:

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

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

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

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