CSS बॉर्डर रेडियस: गोल कोने, वृत्त, और आकृतियाँ

border-radius को समझना

CSS की border-radius प्रॉपर्टी किसी एलिमेंट के बाहरी बॉर्डर किनारे के कोनों को गोल करती है। यह हर कोने को स्वतंत्र रूप से नियंत्रित करने के लिए एक से चार मान स्वीकार करती है — ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ और नीचे-बाएँ। एक ही मान चारों कोनों पर समान त्रिज्या लागू करता है, जबकि चार मान आपको असममित आकृतियाँ बनाने देते हैं।

border-radius किसी भी ऐसे एलिमेंट के साथ काम करती है जिसमें दिखाई देने वाले बॉर्डर, बैकग्राउंड या शैडो हों। यह बैकग्राउंड और बॉर्डर दोनों को गोल आकृति में क्लिप करती है, और यह box-shadow, outline और overflow के साथ सही ढंग से इंटरैक्ट करती है। यह प्रॉपर्टी आधुनिक UI डिज़ाइन के लिए आवश्यक है — बटन की हल्की गोलाई से लेकर जटिल जैविक आकृतियों तक।

border-radius से आकृतियाँ बनाना

त्रिज्या मानों को बदलकर, आप पूरी तरह CSS से आकृतियों की एक विस्तृत श्रृंखला बना सकते हैं। जनरेटर आपको हर कोने को दृश्य रूप से समायोजित करने और परिणामी आकृति को तुरंत देखने देता है।

• पिल आकृति — कैप्सूल बटन की तरह पूरी तरह गोल सिरे बनाने के लिए border-radius को 9999px (या चौड़े एलिमेंट पर 50%) पर सेट करें। यह टैग, बैज और पिल-शैली के बटनों के लिए सबसे आम UI पैटर्न है
• वृत्त — किसी वर्गाकार एलिमेंट (समान चौड़ाई और ऊँचाई) पर border-radius: 50% लागू करें। प्रतिशत हर आयाम के सापेक्ष गणना किया जाता है, जिससे किसी भी वर्ग से एक पूर्ण वृत्त बनता है
• पत्ती और ब्लॉब आकृतियाँ — जैविक पत्ती, बूँद या ब्लॉब आकृतियाँ बनाने के लिए दो विपरीत कोनों को उच्च मान और अन्य दो को शून्य पर सेट करें (जैसे border-radius: 60% 0 60% 0), जो आधुनिक लैंडिंग पेजों पर लोकप्रिय हैं

उन्नत दीर्घवृत्ताकार कोने

border-radius शॉर्टहैंड एक स्लैश (/) सिंटैक्स का समर्थन करता है जो आपको हर कोने के लिए अलग-अलग क्षैतिज और ऊर्ध्वाधर त्रिज्या परिभाषित करने देता है। यह वृत्ताकार के बजाय दीर्घवृत्ताकार (अंडाकार) वक्र बनाता है, जिससे ऐसी जटिल जैविक आकृतियाँ संभव होती हैं जो अकेले वृत्ताकार त्रिज्या से नहीं बन सकतीं।

• स्लैश सिंटैक्स — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% का अर्थ है कि क्षैतिज त्रिज्या सभी 50% हैं, लेकिन ऊर्ध्वाधर त्रिज्या अलग हैं (ऊपर 60%, नीचे 40%), जो एक अंडे जैसी आकृति बनाती है
• व्यक्तिगत कोने की प्रॉपर्टीज़ — border-top-left-radius: 50px 30px 50px क्षैतिज त्रिज्या और 30px ऊर्ध्वाधर त्रिज्या के साथ एक दीर्घवृत्ताकार कोना सेट करती है। यह शॉर्टहैंड की तुलना में बारीक नियंत्रण देती है
• प्रतिशत का व्यवहार — प्रतिशत का उपयोग करते समय, क्षैतिज त्रिज्या एलिमेंट की चौड़ाई के सापेक्ष और ऊर्ध्वाधर त्रिज्या उसकी ऊँचाई के सापेक्ष होती है। इसका अर्थ है कि किसी आयत पर 50% / 50% एक दीर्घवृत्त बनाता है, वृत्त नहीं

अक्सर पूछे जाने वाले प्रश्न

क्या मुझे border-radius के लिए प्रतिशत या पिक्सेल मानों का उपयोग करना चाहिए?

जब आप चाहते हैं कि त्रिज्या एलिमेंट के आकार के साथ स्केल हो (वृत्त, दीर्घवृत्त, रिस्पॉन्सिव आकृतियाँ) तब प्रतिशत का उपयोग करें। एलिमेंट के आकार की परवाह किए बिना एक समान कोने की गोलाई के लिए (बटन कोने, कार्ड कोने, इनपुट फील्ड) पिक्सेल का उपयोग करें। एक आम पैटर्न है UI कंपोनेंट के लिए border-radius: 8px और अवतार व वृत्ताकार एलिमेंट के लिए border-radius: 50%।

क्या border-radius सबपिक्सेल रेंडरिंग समस्याएँ पैदा करता है?

उच्च-DPI डिस्प्ले पर, छोटे border-radius मान (1-2px) सबपिक्सेल रेंडरिंग के कारण खुरदरे दिख सकते हैं। यह सबसे अधिक कम-कंट्रास्ट बैकग्राउंड पर पतले बॉर्डर के साथ दिखाई देता है। थोड़ी बड़ी त्रिज्या (कम से कम 3-4px) का उपयोग करना या will-change: transform लागू करना रेटिना स्क्रीन पर रेंडरिंग गुणवत्ता सुधार सकता है।

border-radius बॉर्डर और आउटलाइन के साथ कैसे इंटरैक्ट करता है?

border-radius बॉर्डर के बाहरी किनारे को गोल करता है। यदि एलिमेंट में मोटा बॉर्डर है, तो आंतरिक त्रिज्या स्वचालित रूप से बाहरी-त्रिज्या घटा बॉर्डर-चौड़ाई के रूप में गणना की जाती है। अधिकांश ब्राउज़रों में आउटलाइन border-radius का पालन नहीं करती — वे आयताकार बनी रहती हैं। हालाँकि box-shadow गोल आकृति का पालन करती है।