CSS Border Shorthand

border shorthand आपको हर बार तीन अलग declarations लिखने के बजाय सभी चार sides के लिए width, style, और color एक ही line में set करने देता है।

In this page:

Shorthand Syntax
Value Order की Flexibility
Shorthand बिना बताई गई Values को Reset करता है
Shorthand को Per-Side Overrides के साथ Combine करना
border बनाम border-image

Syntax

css

selector {
  border: width style color;
}

Shorthand Syntax

border: width style color, border-width, border-style, और border-color को एक declaration में combine करता है, जो सभी चार sides पर एक जैसे लागू होता है। कुछ भी render करने के लिए सिर्फ border-style सख़्ती से ज़रूरी है; अगर छोड़ी जाएँ तो width और color की sensible defaults हैं (medium और currentColor)।

Note:

Accepted values:
border — width style color, जैसे 1px solid #333
width — length, thin, medium, या thick
style — solid, dashed, dotted, और अन्य; border दिखाने के लिए ज़रूरी
color — कोई भी CSS color, default currentcolor है
tीनों हिस्सों का order flexible है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Shorthand Syntax

css

<style>
.box {
  border: 2px solid red;
}
</style>
<div class="box">Width, style, and color together</div>

Value Order की Flexibility

कुछ CSS shorthands के उलट, border की तीन values technically किसी भी order में आ सकती हैं क्योंकि हर value का type (एक length, एक style keyword, या एक color) unambiguous है — लेकिन width-style-color readability के लिए लगभग universal convention है।

Note:

Accepted values:
width — length या thin, medium, thick
style — solid, dashed, dotted, double और दूसरे
color — कोई भी color value
values किसी भी order में आ सकती हैं
style — border दिखने के लिए ज़रूरी है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Value Order Flexibility

css

<style>
.box {
  border: red solid 2px;
}
</style>
<div class="box">Order doesn't matter, each value's type is unambiguous</div>

Shorthand बिना बताई गई Values को Reset करता है

border shorthand इस्तेमाल करना border-width, border-style, और border-color में से जिस भी value को आप शामिल नहीं करते उसे उसकी default पर reset कर देता है — इसलिए सिर्फ border: solid red width को वापस medium पर reset कर देता है भले ही cascade में पहले एक wider border-width set की गई हो।

उदाहरण: Shorthand Resets Unspecified Values

css

<style>
.box {
  border-width: 10px;
  border: solid red;
}
</style>
<div class="box">border-width silently reset back to medium</div>

Shorthand को Per-Side Overrides के साथ Combine करना

एक common pattern है border को सभी sides के लिए shorthand baseline की तरह set करना, फिर बाद में सिर्फ एक side को border-left या border-top से override करना — उस edge के लिए बाद वाला, ज़्यादा specific side rule जीतता है।

उदाहरण: Combining Shorthand With Per-Side Overrides

css

<style>
.box {
  border: 2px solid black;
  border-left: 6px solid teal;
}
</style>
<div class="box">Shorthand baseline, left side overridden</div>

border बनाम border-image

border shorthand सिर्फ solid-color borders handle करता है; एक patterned या image-based border (जैसे icons से बनी dotted line) पाने के लिए इसके बजाय अलग border-image property चाहिए होती है, जिसे border control नहीं करता।

उदाहरण: border vs border-image

css

<style>
.solid {
  border: 10px solid black;
}
.image {
  border: 10px solid transparent;
  border-image: url('https://placehold.co/60x60') 20;
}
</style>
<div class="solid">Plain solid border</div>
<div class="image">border-image handles the pattern instead</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Border Sides Next Lesson → CSS Margins