← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 17 of 21

CSS Border Style

किसी border की style खुद line pattern है, यह इससे independent है कि वह कितनी मोटी है या उसका color क्या है — solid, dashed, dotted, और कुछ 3D जैसे दिखने वाले variants।

In this page:

  1. border-style Values
  2. border-style क्यों ज़रूरी है
  3. Per-Side Styles
  4. Practice में double, groove, ridge, inset, outset
  5. Style को none और hidden के साथ Combine करना
Syntax
css 
selector {
  border-style: solid | dashed | dotted | double | none;
}

border-style Values

border-style solid, dashed, dotted, double, groove, ridge, inset, और outset accept करता है, साथ ही border को पूरी तरह हटाने के लिए none और hidden भी। हर keyword genuinely एक अलग line pattern produce करता है, सिर्फ एक visual tweak नहीं — dashed और dotted dash की length और spacing में अलग हैं, जबकि groove/ridge/inset/outset border color से derive की गई light और dark shading इस्तेमाल करके एक 3D bevel simulate करते हैं।

Note:
  • Accepted values:
  • none — कोई border नहीं (default)
  • solid — एक single line
  • dashed — dashes
  • dotted — dots
  • double — दो parallel lines
  • groove | ridge | inset | outset — 3D effects
  • hidden — कोई border नहीं, table conflicts में जीतता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The border-style Values

css 
<style>
.solid { border: 4px solid black; }
.dashed { border: 4px dashed black; }
.dotted { border: 4px dotted black; }
.double { border: 6px double black; }
</style>
<div class="solid">solid</div>
<div class="dashed">dashed</div>
<div class="dotted">dotted</div>
<div class="double">double</div>

border-style क्यों ज़रूरी है

सिर्फ border-width और border-color set करने का कोई visible effect नहीं होता — border-style के बिना, browser के पास draw करने के लिए कोई line pattern नहीं होता, इसलिए बिल्कुल कोई border render नहीं होता भले ही width और color set हों। यह सबसे common वजह है जिससे कोई border चुपचाप दिखने में fail हो जाता है।

उदाहरण: Why border-style Is Required

css 
<style>
.no-style { border-width: 4px; border-color: red; }
.with-style { border-width: 4px; border-color: red; border-style: solid; }
</style>
<div class="no-style">Invisible: no style</div>
<div class="with-style">Visible: style set</div>

Per-Side Styles

border-top-style, border-right-style, border-bottom-style, और border-left-style हर side को पूरी तरह अलग pattern इस्तेमाल करने देते हैं, जो dashed-top divider के साथ solid sides जैसे effects के लिए उपयोगी है।

Note:
  • Accepted values:
  • none | hidden — कोई visible border नहीं
  • solid — continuous line
  • dashed — dashes
  • dotted — dots
  • double — gap वाली दो lines
  • groove | ridge | inset | outset — 3D effects
  • border-top-style आदि — हर एक इनमें से कोई एक value लेता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Per-Side Styles

css 
<style>
.box {
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 3px;
  border-color: black;
}
</style>
<div class="box">Dashed top, solid sides</div>

Practice में double, groove, ridge, inset, outset

double border-width से size किए गए एक gap के साथ दो parallel lines draw करता है, सही दिखने के लिए कम से कम 3px चाहिए। groove और ridge border-color के light/dark variants इस्तेमाल करके एक carved या raised line simulate करते हैं; inset और outset वही 3D shading पूरे border पर लागू करते हैं, जो पुरानी style के panel UIs पर common है।

Note:
  • Accepted values:
  • none — कोई border नहीं (initial value)
  • hidden — कोई border नहीं; table border conflicts में जीतता है
  • solid — एक continuous line
  • dashed — dashes की एक series
  • dotted — dots की एक series
  • double — दो parallel lines
  • groove | ridge — carved या raised 3D look
  • inset | outset — sunken या raised 3D look
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: double, groove, ridge, inset, outset in Practice

css 
<style>
.double { border: 6px double #333; }
.groove { border: 6px groove #333; }
.ridge { border: 6px ridge #333; }
</style>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>

Style को none और hidden के साथ Combine करना

none और hidden दोनों border और उसकी width को पूरी तरह हटा देते हैं, लेकिन ये specifically table border-collapse conflicts में अलग होते हैं: hidden किसी adjacent cell पर किसी भी दूसरे border style पर हमेशा जीतता है, जबकि none को override किया जा सकता है।

उदाहरण: Style Combined with none and hidden

css 
<style>
.a { border-style: none; }
.b { border-style: hidden; }
</style>
<div class="a">none</div>
<div class="b">hidden</div>
Live Example
Related Topics

CSS Border Width · CSS Border Color · CSS Border Sides · CSS Border Shorthand

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. border-color और border-width set करना लेकिन border-style नहीं, इसलिए कोई border नहीं दिखता क्योंकि default style none है।
  2. dotted जैसी किसी style value की spelling doted गलत करना, जो invalid है।
  3. बहुत पतले borders के साथ groove, ridge या inset इस्तेमाल करना, जो solid जैसे लगभग एक जैसे दिखते हैं।
ब्राउज़र सपोर्ट

हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Borders Next Lesson → CSS Border Width

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.