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

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 गुण,
जो बॉर्डर के लिए एक शॉर्टहैंड गुण है