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

CSS Border Color

Border color खुद line को paint करता है — कोई भी CSS color value काम करती है, और अगर आप कभी एक set नहीं करते, तो border चुपचाप element की खुद की text color पर वापस चला जाता है।

In this page:

  1. border-color Set करना
  2. currentColor Default
  3. Per-Side Colors
  4. Transparent Borders
  5. Opacity के साथ Border Color
Syntax
css 
selector {
  border-color: color;
}

border-color Set करना

border-color कोई भी valid CSS color accept करता है: named keywords, hex, rgb()/rgba(), या hsl()/hsla()। यह सभी sides के लिए एक value ले सकता है या top/right/bottom/left के लिए उसी order में चार values तक, margin और padding जैसे ही shorthand pattern को match करते हुए।

Note:
  • Accepted values:
  • named color — red, navy, वगैरह
  • #rrggbb — hex code
  • rgb() / hsl() — functional colors, optional alpha के साथ
  • transparent — invisible border जो फिर भी जगह लेता है
  • currentcolor — text color से match करता है (default)
  • चार values तक top, right, bottom, left set करती हैं
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Setting border-color

css 
<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-color: crimson;
}
</style>
<div class="box">One color for all sides</div>

currentColor Default

अगर border-style और border-width set हैं लेकिन border-color छोड़ दिया गया है, तो border currentColor इस्तेमाल करता है — element की अपनी computed text color — black default होने के बजाय। इसका मतलब है कि किसी element की color property बदलना चुपचाप उसकी border color भी बदल सकता है।

Note:
  • Accepted values:
  • named color — जैसे crimson
  • #rrggbb / rgb() / hsl() — exact colors
  • rgba() / hsla() — semi-transparent border
  • transparent — invisible border जो फिर भी जगह लेता है
  • currentcolor — element की text color (initial value)
  • एक से चार values — top, right, bottom, left order
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The currentColor Default

css 
<style>
.box {
  color: purple;
  border-style: solid;
  border-width: 3px;
}
</style>
<div class="box">Border matches the text color automatically</div>

Per-Side Colors

border-top-color, border-right-color, border-bottom-color, और border-left-color हर side को पूरी तरह अलग color इस्तेमाल करने देते हैं, जो two-tone card border या color-coded status indicator जैसे effects के लिए उपयोगी है।

Note:
  • Accepted values:
  • एक value — सभी चार sides
  • दो values — पहले top/bottom, फिर left/right
  • तीन values — top, left/right, bottom
  • चार values — top, right, bottom, left
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Per-Side Colors

css 
<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}
</style>
<div class="box">Four different colors, one per side</div>

Transparent Borders

border-color: transparent border की width को invisible space के रूप में reserved रखता है बिना कोई visible line draw किए — layout space reserve करने की एक common trick जो सिर्फ तब visible होती है (जैसे :hover पर) बिना element की position shift हुए।

Note:
  • Accepted values:
  • named color — जैसे crimson
  • #rrggbb / rgb() / hsl() — exact colors
  • rgba() / hsla() — semi-transparent border
  • transparent — invisible border जो फिर भी जगह लेता है
  • currentcolor — element की text color (initial value)
  • एक से चार values — top, right, bottom, left order
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Transparent Borders

css 
<style>
.btn {
  border: 3px solid transparent;
}
.btn:hover {
  border-color: blue;
}
</style>
<button class="btn">Space reserved, only visible on hover</button>

Opacity के साथ Border Color

border-color के लिए rgba() या hsla() इस्तेमाल करना border को element के पीछे जो कुछ भी है उसके साथ आंशिक रूप से blend होने देता है, एक पूरी तरह opaque named color या hex value के उलट।

उदाहरण: Border Color With Opacity

css 
<style>
.box {
  border: 4px solid rgba(0, 0, 255, 0.4);
}
</style>
<div class="box">Border blends with whatever is behind it</div>
Live Example
Related Topics

CSS Background Color · CSS Color Keywords · CSS Border Width · CSS Border Sides

{# 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 set करना और border style भूल जाना, इसलिए कुछ नहीं दिखता।
  2. यह उम्मीद करना कि border color default रूप से black होगी, जबकि यह currentColor, यानी text color पर default होती है।
  3. transparent इस्तेमाल करना और यह भूल जाना कि background border area से फिर भी दिखता रहता है।
ब्राउज़र सपोर्ट

हर 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 Width Next Lesson → CSS Border Sides

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.