CSS Border Color – बॉर्डर का रंग सेट करना

CSS में Border Color प्रॉपर्टी का उपयोग HTML एलिमेंट्स के बॉर्डर का रंग सेट करने के लिए किया जाता है। यह प्रॉपर्टी आपकी वेबसाइट को एक स्टाइलिश और आकर्षक रूप देती है, जिससे बॉर्डर आपके डिज़ाइन के बाकी हिस्सों के साथ मेल खा सके।

इस अध्याय में, हम Border Color प्रॉपर्टी के विभिन्न उपयोग, सिंटैक्स और उदाहरणों को विस्तार से समझेंगे।

---

CSS Border Color का परिचय

CSS Border Color प्रॉपर्टी की मदद से आप बॉर्डर का रंग सेट कर सकते हैं। यह रंग color names, HEX, RGB, और HSL जैसे वैल्यू के जरिए निर्धारित किया जा सकता है।

---

Border Color का सिंटैक्स

सिंटैक्स:

border-color: color;

जहां color वैल्यू हो सकती है:

1. Color Name (जैसे red, blue, आदि)
2. HEX Code (जैसे #ff5733)
3. RGB Value (जैसे rgb(255, 87, 51))
4. HSL Value (जैसे hsl(10, 100%, 60%))

---

CSS Border Color के प्रकार

1. Single Value:

यदि आप केवल एक रंग सेट करते हैं, तो यह सभी चार दिशाओं (top, right, bottom, left) के बॉर्डर पर लागू होगा।

उदाहरण:

div {
    border-style: solid;
    border-width: 3px;
    border-color: red;
}

यह बॉर्डर को चारों दिशाओं में लाल रंग देगा।

2. Multiple Values:

आप चारों दिशाओं के लिए अलग-अलग रंग भी सेट कर सकते हैं:

• border-color: top right bottom left;

उदाहरण:

div {
    border-style: solid;
    border-width: 5px;
    border-color: red green blue yellow;
}

• Top: red
• Right: green
• Bottom: blue
• Left: yellow

3. Top/Bottom और Left/Right के लिए अलग-अलग रंग:

div {
    border-style: solid;
    border-width: 5px;
    border-color: red green;
}

• Top और Bottom: red
• Left और Right: green

4. Top और बाकी सभी:

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

• Top: red
• Left और Right: green
• Bottom: blue

---

CSS Border Color में वैल्यू के प्रकार

1. Color Names:

CSS में पहले से परिभाषित रंगों का उपयोग करें जैसे:

• red
• blue
• green

उदाहरण:

div {
    border-style: solid;
    border-width: 4px;
    border-color: blue;
}

2. HEX Code:

रंग को HEX कोड के रूप में परिभाषित करें:

• Example: #ff5733

उदाहरण:

div {
    border-style: solid;
    border-width: 4px;
    border-color: #ff5733;
}

3. RGB:

RGB (Red, Green, Blue) वैल्यू का उपयोग करें:

• Example: rgb(255, 87, 51)

उदाहरण:

div {
    border-style: solid;
    border-width: 4px;
    border-color: rgb(255, 87, 51);
}

4. RGBA:

RGB के साथ alpha चैनल जोड़ें:

• Example: rgba(255, 87, 51, 0.5)

उदाहरण:

div {
    border-style: solid;
    border-width: 4px;
    border-color: rgba(255, 87, 51, 0.5);
}

5. HSL और HSLA:

HSL (Hue, Saturation, Lightness) का उपयोग करें:

• Example: hsl(10, 100%, 60%)

उदाहरण:

div {
    border-style: solid;
    border-width: 4px;
    border-color: hsl(10, 100%, 60%);
}

---

CSS Border Color के उदाहरण

Example 1: Single Border Color

div {
    border-style: solid;
    border-width: 5px;
    border-color: black;
}

Example 2: Multiple Border Colors

div {
    border-style: solid;
    border-width: 5px;
    border-color: red green blue yellow;
}

Example 3: Transparent Border Color

div {
    border-style: solid;
    border-width: 5px;
    border-color: transparent;
}

Example 4: Hover Effect

div {
    border-style: solid;
    border-width: 5px;
    border-color: red;
    transition: border-color 0.3s ease;
}

div:hover {
    border-color: blue;
}

Example 5: Animation with Border Color

@keyframes colorChange {
    0% {
        border-color: red;
    }
    50% {
        border-color: yellow;
    }
    100% {
        border-color: green;
    }
}

div {
    border-style: solid;
    border-width: 5px;
    animation: colorChange 3s infinite;
}

---

CSS Border Color के साथ शॉर्टहैंड प्रॉपर्टी

border शॉर्टहैंड प्रॉपर्टी का उपयोग करते समय आप बॉर्डर की चौड़ाई, शैली, और रंग को एक साथ सेट कर सकते हैं।

उदाहरण:

div {
    border: 5px solid red;
}

---

CSS Border Color के Best Practices

1. कॉन्ट्रास्ट का ध्यान रखें:
   बॉर्डर का रंग पृष्ठभूमि और टेक्स्ट के साथ मेल खाना चाहिए।
2. Hover Effects का उपयोग करें:
   इंटरएक्टिव डिज़ाइन के लिए बॉर्डर के रंग में Hover Effects जोड़ें।
3. Responsive Design:
   Dynamic Websites में RGBA और HSL जैसे Modern Color Units का उपयोग करें।
4. Minimalism:
   बॉर्डर रंग का अत्यधिक उपयोग न करें। साधारण और साफ डिज़ाइन रखें।

---

CSS Border Color: Advanced Techniques

Border Color with Gradient Effect

CSS में सीधे ग्रेडिएंट को border में लागू करना संभव नहीं है, लेकिन आप इसे background-clip के साथ इमिटेट कर सकते हैं।

उदाहरण:

div {
    border: 5px solid transparent;
    border-image: linear-gradient(to right, red, blue) 1;
}

---

निष्कर्ष

CSS Border Color प्रॉपर्टी आपकी वेबसाइट के बॉर्डर्स को अधिक आकर्षक और स्टाइलिश बनाने में मदद करती है। आप विभिन्न प्रकार के रंगों, वैल्यूज़ और शॉर्टहैंड्स का उपयोग करके अपनी डिज़ाइन को और बेहतर बना सकते हैं।