गुण border-style

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

सिंटैक्स

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

मान

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

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

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

उदाहरण . मान solid

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

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

Результат:

उदाहरण . मान dotted

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

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

Результат:

उदाहरण . मान dashed

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

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

Результат:

उदाहरण . मान ridge

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

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

Результат:

उदाहरण . मान double

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

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

Результат:

उदाहरण . मान groove

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

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

Результат:

उदाहरण . मान inset

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

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

Результат:

उदाहरण . मान outset

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

यह भी देखें