CSS Border Style

CSS Border Style का उपयोग यह तय करने के लिए किया जाता है कि किसी HTML element का border किस प्रकार का दिखाई देगा। जब तक border-style define नहीं किया जाता, तब तक border दिखाई नहीं देता, भले ही border-width या border-color दिया गया हो।

border-style CSS Borders का सबसे जरूरी हिस्सा है।

CSS border-style Property

border-style property border का pattern या type निर्धारित करती है।

Basic syntax:

selector {
  border-style: value;
}

border-style की मुख्य Values

solid

solid value से सीधी continuous line बनती है।

p {
  border-style: solid;
}

dotted

dotted value से dots के रूप में border बनता है।

div {
  border-style: dotted;
}

dashed

dashed value से छोटे-छोटे dashes की border बनती है।

h1 {
  border-style: dashed;
}

double

double value से दो parallel lines की border बनती है। इसमें border-width कम से कम 3px होना चाहिए।

p {
  border-style: double;
  border-width: 5px;
}

groove

groove value से 3D effect वाला border बनता है, जो अंदर की ओर दबा हुआ लगता है।

div {
  border-style: groove;
}

ridge

ridge value भी 3D effect देती है, लेकिन यह बाहर की ओर उभरा हुआ लगता है।

div {
  border-style: ridge;
}

inset

inset value से element ऐसा दिखता है जैसे वह अंदर की ओर धंसा हुआ हो।

section {
  border-style: inset;
}

outset

outset value से element बाहर की ओर उभरा हुआ दिखाई देता है।

section {
  border-style: outset;
}

none

none value से कोई border दिखाई नहीं देता।

p {
  border-style: none;
}

hidden

hidden value none के समान होती है, लेकिन table borders में इसका behavior अलग हो सकता है।

table {
  border-style: hidden;
}

Multiple Border Styles (Four Sides)

CSS में हर side के लिए अलग-अलग border-style दिया जा सकता है।

Order होता है:
top, right, bottom, left

div {
  border-style: solid dotted dashed double;
}

इसका अर्थ:

• top: solid
• right: dotted
• bottom: dashed
• left: double

Individual Side Border Style

हर side के लिए अलग property भी होती है।

Properties:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Example:

div {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: double;
}

border-style के बिना Border क्यों नहीं दिखता

अगर केवल border-width और border-color दिया गया है लेकिन border-style नहीं है, तो border दिखाई नहीं देगा।

गलत उदाहरण:

p {
  border-width: 2px;
  border-color: red;
}

सही उदाहरण:

p {
  border-width: 2px;
  border-color: red;
  border-style: solid;
}

border-style का Practical Use

• Content को highlight करने के लिए
• Box और card layout बनाने के लिए
• Button और input fields को visually अलग दिखाने के लिए
• Hover effects में border change करने के लिए

Example hover usage:

button {
  border-style: solid;
}

button:hover {
  border-style: dashed;
}

CSS Border Style web design में structure और visual clarity लाने के लिए एक essential property है।