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

CSS Border Sides

सभी चार edges को एक जैसे style करने के बजाय, CSS आपको सिर्फ top, right, bottom, या left border को independently target करने देता है, हर एक की अपनी width, style, और color के साथ।

In this page:

  1. चार Side Shorthands
  2. Asymmetric Design के लिए Sides Combine करना
  3. Side Shorthand बनाम Individual Properties
  4. एक Single Side हटाना
  5. Order of Precedence
Syntax
css 
selector {
  border-top: width style color;
  border-right: width style color;
  border-bottom: width style color;
  border-left: width style color;
}

चार Side Shorthands

border-top, border-right, border-bottom, और border-left हर एक पूरी border property जैसा ही width-style-color shorthand accept करते हैं, लेकिन सिर्फ उसी एक side पर लागू होते हैं, बाकियों को unaffected छोड़ते हुए जब तक उन्हें अलग से set न किया जाए।

Note:
  • Accepted values:
  • border-top | border-right | border-bottom | border-left — हर एक एक side
  • border-inline | border-block — logical axes
  • हर एक width style color लेता है, जैसे 2px solid red
  • 1 से 4 values वाला border-style — हर side के लिए अलग styles
  • none — उस side का border हटा देता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Four Side Shorthands

css 
<style>
.box {
  border-top: 4px solid red;
  border-right: 2px dashed blue;
}
</style>
<div class="box">Different width/style/color per side</div>

Asymmetric Design के लिए Sides Combine करना

हर side पर अलग-अलग combinations set करना — एक मोटा colored left border और बाकी जगह पतले gray borders — callout boxes, blockquotes, और active-tab indicators के लिए एक common pattern है।

Note:
  • Accepted values:
  • border-top — top side के लिए width style color
  • border-right — right side के लिए
  • border-bottom — bottom side के लिए
  • border-left — left side के लिए
  • border-block / border-inline — logical equivalents
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Combining Sides for Asymmetric Design

css 
<style>
.callout {
  border-left: 6px solid teal;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
</style>
<div class="callout">Thick colored left accent, thin gray elsewhere</div>

Side Shorthand बनाम Individual Properties

border-top खुद border-top-width, border-top-style, और border-top-color का shorthand है; जब आपको किसी एक side के सिर्फ एक aspect को override करना हो, तो आप ज़्यादातर sides के लिए side shorthand को individual width/style/color properties के साथ mix कर सकते हैं।

उदाहरण: Side Shorthand vs Individual Properties

css 
<style>
.box {
  border-top: 3px solid black;
  border-top-color: red;
}
</style>
<div class="box">Shorthand baseline, then one aspect overridden</div>

एक Single Side हटाना

border-bottom: none set करना (या किसी भी एक side को none) सिर्फ उस edge की line हटा देता है जबकि बाकी तीन sides पर width/style/color untouched रहते हैं — किसी card के लिए उपयोगी जो एक edge पर open दिखना चाहिए।

Note:
  • Accepted values:
  • border-top — एक side की width, style और color
  • none — उस side से border हटा देता है
  • 0 — zero width, कोई visible border नहीं
  • transparent — invisible लेकिन जगह बनी रहती है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Removing a Single Side

css 
<style>
.card {
  border: 2px solid black;
  border-bottom: none;
}
</style>
<div class="card">Open on the bottom edge</div>

Order of Precedence

जब एक general border property और एक specific side property दोनों एक ही edge को target करते हैं, तो ज़्यादा specific per-side declaration जीतती है, किसी special border-specific logic के बजाय normal CSS cascade rules को follow करते हुए।

उदाहरण: Order of Precedence

css 
<style>
.box {
  border: 2px solid black;
  border-top: 2px solid red;
}
</style>
<div class="box">The more specific per-side rule wins on top</div>
Live Example
Related Topics

CSS Border Color · CSS Border Shorthand · CSS Border Width · CSS Border Style

{# 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. बिना style के border-top: 2px इस्तेमाल करना, इसलिए border नहीं दिखता।
  2. border: 1px solid set करना और फिर border-left: none, और यह उम्मीद करना कि बाद वाला rule नज़रअंदाज़ हो जाएगा, जबकि यह सिर्फ उस side को override करता है।
  3. किसी general border rule से पहले border-left रखना, इसलिए बाद वाली shorthand उसे override कर देती है।
ब्राउज़र सपोर्ट

हर 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 Border Color Next Lesson → CSS Border Shorthand

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.