गुण border-style

गुण border-style सभी तरफ एक साथ या प्रत्येक तरफ अलग-अलग बॉर्डर की शैली निर्धारित करता है। यह निम्नलिखित गुणों के लिए एक शॉर्टहैंड गुण है: border-left-style, border-right-style, border-top-style, border-bottom-style.

सिंटैक्स

सिलेक्टर {
	border-style: मान;
}

मान

मान	विवरण
`solid`	ठोस रेखा।
`dotted`	बिंदुओं के रूप में बॉर्डर।
`dashed`	डैश के रूप में बॉर्डर।
`ridge`	उभरी हुई रेखा के रूप में बॉर्डर।
`double`	दोहरी रेखा के रूप में बॉर्डर। प्रभाव देखने के लिए बॉर्डर की मोटाई कम से कम `3px` होनी चाहिए।
`groove`	अवतल बॉर्डर।
`inset`	धंसा हुआ बॉर्डर।
`outset`	उभरा हुआ बॉर्डर।
`none`	बॉर्डर का अभाव।

डिफ़ॉल्ट मान: none.

मानों की संख्या

यह गुण 1, 2, 3 या 4 मान ले सकता है, जो स्पेस से अलग करके दिए जाते हैं:

संख्या	विवरण
`1`	सभी तरफ एक साथ प्रकार।
`2`	पहला मान ऊपर और नीचे के लिए, दूसरा - बाएं और दाएं बॉर्डर के लिए।
`3`	पहला मान ऊपर के लिए, दूसरा - बाएं और दाएं बॉर्डर के लिए, तीसरा - नीचे के लिए।
`4`	पहला मान ऊपरी बॉर्डर के लिए, दूसरा - दाएं के लिए, तीसरा - नीचे के लिए, चौथा - बाएं बॉर्डर के लिए।

उदाहरण . मान solid

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

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

उदाहरण . मान dotted

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

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

उदाहरण . मान dashed

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

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

उदाहरण . मान ridge

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

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

उदाहरण . मान double

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

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

उदाहरण . मान groove

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

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

उदाहरण . मान inset

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

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

उदाहरण . मान outset

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

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

उदाहरण

इस उदाहरण में तत्वों की विभिन्न तरफों के लिए विभिन्न प्रकार की बॉर्डर निर्धारित की गई हैं:

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

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	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;
}

उदाहरण

अब ऊपरी और निचली बॉर्डर के लिए प्रकार solid निर्धारित किया गया है, और दाएं और बाएं के लिए - dotted:

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

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

यह भी देखें

गुण border-color,
जो बॉर्डर का रंग निर्धारित करता है
गुण border-width,
जो बॉर्डर की मोटाई निर्धारित करता है
गुण border,
जो बॉर्डर के लिए एक शॉर्टहैंड गुण है