CSS Border Sides – बॉर्डर को एक तरफ से स्टाइल करना

CSS में Border Sides का उपयोग एलिमेंट के केवल किसी विशेष दिशा (साइड) पर बॉर्डर जोड़ने या स्टाइल करने के लिए किया जाता है। यह आपको बॉर्डर को top, right, bottom, और left साइड पर अलग-अलग नियंत्रित करने की सुविधा देता है।

इस अध्याय में, हम CSS Border Sides को विस्तार से समझेंगे और इसे विभिन्न उदाहरणों के माध्यम से सीखेंगे।

Border Sides का परिचय

जब आप किसी एलिमेंट के सभी किनारों (चारों दिशाओं) पर बॉर्डर सेट नहीं करना चाहते, तो आप केवल किसी एक या एक से अधिक साइड के लिए बॉर्डर को सेट कर सकते हैं।

CSS में चार साइड्स को अलग-अलग नियंत्रित करने के लिए निम्नलिखित प्रॉपर्टीज़ का उपयोग किया जाता है:

border-top
border-right
border-bottom
border-left

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

सिंटैक्स:

border-side: width style color;

Explanation:

side – वह साइड जिसे आप स्टाइल करना चाहते हैं (top, right, bottom, या left)।
width – बॉर्डर की चौड़ाई (जैसे: thin, medium, thick, या px)।
style – बॉर्डर की स्टाइल (जैसे: solid, dashed, dotted)।
color – बॉर्डर का रंग।

CSS Border Sides प्रॉपर्टीज़

1. border-top

एलिमेंट के केवल टॉप (ऊपरी भाग) पर बॉर्डर सेट करने के लिए।

border-top: width style color;

2. border-right

एलिमेंट के केवल दाईं ओर बॉर्डर सेट करने के लिए।

border-right: width style color;

3. border-bottom

एलिमेंट के केवल नीचे (नीचे की दिशा) पर बॉर्डर सेट करने के लिए।

border-bottom: width style color;

4. border-left

एलिमेंट के केवल बाईं ओर बॉर्डर सेट करने के लिए।

border-left: width style color;

CSS Border Sides: Examples

Example 1: Single Side Border (Top Border)

div {
    border-top: 5px solid red;
}

Example 2: Two Side Borders (Top and Bottom)

div {
    border-top: 3px dashed blue;
    border-bottom: 3px dashed blue;
}

Example 3: Three Side Borders (Top, Left, and Right)

div {
    border-top: 4px dotted green;
    border-left: 4px dotted green;
    border-right: 4px dotted green;
}

Example 4: All Sides with Different Styles

div {
    border-top: 5px solid red;
    border-right: 4px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 2px double black;
}

CSS Border Side Shorthand

यदि आप किसी एक साइड का बॉर्डर सेट करना चाहते हैं, तो आप शॉर्टहैंड का उपयोग कर सकते हैं।

उदाहरण:

border-top: 5px solid red;
border-right: 5px dashed blue;

आप इसे विस्तृत तरीके से भी लिख सकते हैं:

border-width: 5px 5px 0 0; /* top, right, bottom, left */
border-style: solid dashed none none;
border-color: red blue transparent transparent;

Advanced Examples

Example 5: Border with Transparent Sides

div {
    border-top: 5px solid red;
    border-right: 5px solid transparent;
    border-bottom: 5px solid green;
    border-left: 5px solid transparent;
}

Example 6: Responsive Side Borders

div {
    border-top: 2em solid orange;
    border-right: 10%;
    border-bottom: 3px dotted purple;
    border-left: 1rem dashed brown;
}

Example 7: Animated Side Borders

div {
    border-top: 5px solid red;
    border-right: 5px solid blue;
    border-bottom: 5px solid green;
    border-left: 5px solid yellow;
    transition: border-width 0.3s ease-in-out;
}

div:hover {
    border-width: 10px;
}

CSS Border Sides और Tables

CSS Border Sides का उपयोग HTML टेबल्स में भी किया जा सकता है, ताकि टेबल की विभिन्न दिशाओं पर अलग-अलग स्टाइल लागू किया जा सके।

उदाहरण:

<table style="border-collapse: collapse;">
    <tr>
        <td style="border-top: 2px solid black;">Cell 1</td>
        <td style="border-bottom: 2px dashed blue;">Cell 2</td>
    </tr>
</table>

Best Practices for CSS Border Sides

मिनिमल डिज़ाइन का पालन करें:
केवल आवश्यक दिशाओं पर बॉर्डर का उपयोग करें।
Responsive Units का उपयोग करें:
जैसे em, rem, और % का उपयोग करके बॉर्डर को स्केलेबल बनाएं।
Hover Effects जोड़ें:
Hover इफेक्ट्स के साथ इंटरएक्टिव बॉर्डर डिज़ाइन बनाएं।
Contrast का ध्यान रखें:
बॉर्डर का रंग पृष्ठभूमि और टेक्स्ट के साथ मेल खाना चाहिए।

निष्कर्ष

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