CSS Border Color

CSS Border Color का उपयोग border के रंग को निर्धारित करने के लिए किया जाता है। इस property की मदद से हम किसी HTML element के border को अलग-अलग रंग दे सकते हैं। border-color तभी प्रभावी होता है जब border-style defined हो।

border-color Property

border-color property से border का color सेट किया जाता है।

Basic syntax:

selector {
  border-color: value;
}

border-color के Color Formats

CSS में border color कई formats में define किया जा सकता है।

Color Name

Direct color name का उपयोग किया जा सकता है।

p {
  border-style: solid;
  border-color: red;
}

HEX Value

HEX value का उपयोग precise color देने के लिए किया जाता है।

div {
  border-style: solid;
  border-color: #3498db;
}

RGB Value

RGB format red, green और blue का combination होता है।

p {
  border-style: solid;
  border-color: rgb(255, 0, 0);
}

RGBA Value

RGBA में alpha channel होता है, जिससे transparency control की जाती है।

div {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.5);
}

HSL Value

HSL format में hue, saturation और lightness का उपयोग होता है।

p {
  border-style: solid;
  border-color: hsl(120, 100%, 25%);
}

Four Sides के लिए अलग-अलग Border Color

border-color में चार values देकर हर side का अलग color तय किया जा सकता है।

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

Example:

div {
  border-style: solid;
  border-color: red green blue black;
}

इसका अर्थ:

• top: red
• right: green
• bottom: blue
• left: black

Two और Three Values का Usage

Two values:

div {
  border-style: solid;
  border-color: red blue;
}

यहाँ:

• top और bottom: red
• left और right: blue

Three values:

div {
  border-style: solid;
  border-color: red green blue;
}

यहाँ:

• top: red
• left और right: green
• bottom: blue

Individual Border Color Properties

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

Properties:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Example:

div {
  border-style: solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: black;
}

border-style के बिना border-color

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

गलत उदाहरण:

p {
  border-color: red;
}

सही उदाहरण:

p {
  border-style: solid;
  border-color: red;
}

Transparent Border Color

transparent value का उपयोग करके invisible border बनाया जा सकता है जो layout को प्रभावित करता है।

div {
  border-style: solid;
  border-color: transparent;
}

यह technique hover effects और layout alignment में उपयोगी होती है।

border-color का Practical Use

• Sections को visually अलग दिखाने के लिए
• Error और success states दिखाने के लिए
• Hover और focus effects बनाने के लिए
• UI elements की visual hierarchy control करने के लिए

Example focus effect:

input {
  border-style: solid;
  border-color: #ccc;
}

input:focus {
  border-color: blue;
}

CSS Border Color design में clarity और visual communication बढ़ाने के लिए एक महत्वपूर्ण property है।