CSS Rounded Borders – गोल बॉर्डर के साथ डिज़ाइन

CSS Rounded Borders का उपयोग वेबसाइट पर एक हल्का और आधुनिक लुक देने के लिए किया जाता है। यह बॉर्डर के कोनों को गोल (rounded) बनाने का तरीका है, जिससे वे तेज़ और नुकीले होने की बजाय मुलायम और आकर्षक दिखते हैं। राउंडेड बॉर्डर्स वेब डिज़ाइन में एक आम ट्रेंड बन चुके हैं, क्योंकि ये यूज़र इंटरफेस को ज़्यादा प्रोफेशनल और मॉडर्न दिखाते हैं।

इस अध्याय में, हम CSS Rounded Borders के बारे में विस्तार से समझेंगे, कैसे इसे लागू करें, और इसके उपयोग के कुछ उदाहरण देखेंगे।

---

CSS Rounded Borders का परिचय

CSS में गोल बॉर्डर बनाने के लिए border-radius प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी एलिमेंट के सभी कोनों (top-left, top-right, bottom-left, और bottom-right) को गोल करने के लिए उपयोग की जाती है।

Syntax:

border-radius: value;

Explanation:

• value – यह वह मूल्य है जो कोने की गोलाई को निर्धारित करता है। यह पिक्सल (px), प्रतिशत (%), या em के रूप में हो सकता है।

---

CSS border-radius का सिंटैक्स

1. Single Value (सभी कोनों के लिए समान गोलाई)

यदि आप सभी कोनों को एक जैसी गोलाई देना चाहते हैं, तो आप केवल एक मान प्रदान करते हैं।

Example:

div {
    border-radius: 10px;
}

यह सभी कोनों को 10 पिक्सल गोल कर देता है।

2. Multiple Values (अलग-अलग गोलाई के लिए)

यदि आप प्रत्येक कोने की गोलाई को अलग-अलग नियंत्रित करना चाहते हैं, तो आप चार मानों का उपयोग कर सकते हैं:

• border-radius: top-left top-right bottom-right bottom-left;

Example:

div {
    border-radius: 10px 20px 30px 40px;
}

यह कोनों को इस प्रकार गोल करेगा:

• top-left: 10px
• top-right: 20px
• bottom-right: 30px
• bottom-left: 40px

3. Elliptical Border Radius

आप गोलाई को आयताकार (elliptical) रूप में भी बदल सकते हैं। इसके लिए आप दो मानों का उपयोग करते हैं: पहला मान क्षैतिज (horizontal) और दूसरा मान ऊर्ध्वाधर (vertical) गोलाई के लिए।

Example:

div {
    border-radius: 50px 25px;
}

यह बॉर्डर के ऊपरी और निचले कोनों को अलग-अलग गोलाई देगा। पहले मान से क्षैतिज गोलाई और दूसरे मान से ऊर्ध्वाधर गोलाई को नियंत्रित किया जाता है।

---

CSS Border Radius के Examples

Example 1: Simple Rounded Corners

div {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 15px;
}

यह 200×100 पिक्सल का डिव एलिमेंट बनाएगा जिसमें 15 पिक्सल के गोल कोने होंगे।

Example 2: Elliptical Corners

div {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 50px 20px;
}

यह आयताकार बॉक्स में गोलाकार कोने बनाएगा, जिसमें ऊर्ध्वाधर गोलाई 20px और क्षैतिज गोलाई 50px होगी।

Example 3: Different Radius for Each Corner

div {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 20px 30px 40px 50px;
}

यह प्रत्येक कोने को अलग-अलग गोलाई देगा:

• top-left: 20px
• top-right: 30px
• bottom-right: 40px
• bottom-left: 50px

Example 4: Circle and Oval Borders

जब border-radius का मान 50% दिया जाता है, तो एलिमेंट को एक गोल (circle) रूप मिल जाता है यदि उसकी चौड़ाई और ऊँचाई समान हो।

Circle Example:

div {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 50%;
}

यह एक पूर्ण गोलाकार एलिमेंट बनाएगा।

Oval Example:

div {
    width: 150px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 50%;
}

यह एक अंडाकार (oval) बॉक्स बनाएगा, क्योंकि चौड़ाई और ऊँचाई समान नहीं हैं।

---

CSS Border Radius और Box Shadows

CSS Border Radius का उपयोग बॉक्स शैडो (box-shadow) के साथ भी किया जा सकता है ताकि एलिमेंट को अधिक आकर्षक और गहराई का एहसास हो।

Example:

div {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

यह बॉक्स के चारों ओर हल्का सा शैडो (shadow) डालेगा और गोल कोने के साथ अधिक सुंदर दिखाई देगा।

---

CSS Border Radius के Best Practices

1. Consistency:
   यदि आप वेबसाइट के विभिन्न हिस्सों पर गोल बॉर्डर्स का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आप एक जैसा गोलाई मान उपयोग करें ताकि डिज़ाइन में सामंजस्य बना रहे।
2. Use for Buttons and Inputs:
   गोल बॉर्डर्स बटन, इनपुट फ़ील्ड्स और अन्य इंटरएक्टिव एलिमेंट्स के लिए आदर्श होते हैं, क्योंकि ये अधिक मॉडर्न और आकर्षक लगते हैं।
3. Responsive Design:
   बॉर्डर के गोलाई मान को रेस्पॉन्सिव (responsive) बनाने के लिए % का उपयोग करें ताकि यह स्क्रीन के आकार के अनुसार स्वचालित रूप से बदल सके।

---

निष्कर्ष

CSS Rounded Borders के माध्यम से आप वेब डिज़ाइन में एक ताज़गी और मॉडर्न लुक ला सकते हैं। border-radius प्रॉपर्टी का सही उपयोग करके आप न केवल डिज़ाइन को सुंदर बना सकते हैं, बल्कि इसका उपयोग इंटरएक्टिव और रेस्पॉन्सिव एलिमेंट्स के लिए भी कर सकते हैं।