თვისება border-color

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

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

სინტაქსი

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

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

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue green 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;
}

Результат:

მაგალითი

თუ საზღვრის ფერი არ არის მითითებული border-color-ში - ის აღებული იქნება თვისებიდან color:

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

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

Результат:

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