बॉर्डर-कलर गुण

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;
}

Результат:

यह भी देखें