बॉर्डर-चौड़ाई गुण

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

Результат:

यह भी देखें