CSS बॉर्डर रेडियस जनरेटर
CSS बॉर्डर रेडियस जनरेटर
border-radius: 16px;
क्या है
CSS का `borderRadius` प्रॉपर्टी एक तत्व के बाहरी सीमा किनारों को गोल आकार में बदल देती है। यह दृश्य रूप से आकर्षक एवं आधुनिक इंटरफ़ेस बनाने हेतु सबसे अधिक उपयोग की जाने वाली CSS प्रॉपर्टियों में से एक है। बॉर्डर-रेडियस प्रॉपर्टी 1 से 8 तक मान ले सकती है: – एकल मान: borderRadius: 10px (सभी चार कोने समान) - दो मान: borderRadius: 10px, 20px (ऊपर-बाएँ/नीचे-दाएँ, ऊपर-दाएँ/नीचे-बाएँ) - तीन मान: borderRadius: 10px, 20px, 30px (ऊपर-बाएँ, ऊपर-दाएँ/नीचे-बाएँ, नीचे-दाएँ) - चार मान: borderRadius: 10px, 20px, 30px, 40px (ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ — घड़ी की दिशा में) - आठ मान (अंडाकार): बॉर्डर-रेडियस: 10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px (अंडाकार कोनों के लिए क्षैतिज/लंबवत त्रिज्याएँ) शॉर्टहैंड बनाम लॉन्गहैंड: - बॉर्डर-रेडियस: 10 पिक्सल (संक्षिप्त रूप; सभी चार कोनों पर) - border-top-left-radius: 10 पिक्सेल (प्रत्येक कोने के लिए) - border-top-right-radius: 20 पिक्सेल - बॉर्डर-निचला-दाहिना-त्रिज्या: 30 पिक्सेल - बॉर्डर-निचला-बायाँ-रेडियस: 40 पिक्सेल प्रतिशत बनाम पिक्सेल मान: - borderRadius: 50% (तत्व के आयामों के सापेक्ष एक वृत्त/अंडाकार बनाता है) - borderRadius: 10px (निश्चित पिक्सेल मान; तत्व के आकार के साथ समानुपातिक रूप से नहीं बदलता) - वृत्तों के लिए, वर्गाकार तत्व पर 50% का उपयोग करें। - पिल के आकारों के लिए, आयताकार तत्वों पर 9999px या 50% का उपयोग करें। सामान्य उपयोग मामले: - वृत्ताकार छवियाँ/अवतार: 50% – गोली के आकार के बटन: 9999 पिक्सेल या ऊँचाई का 25% - कार्ड कोने: 8–16 पिक्सेल – संवादात्मक मोडल: 8–12 पिक्सेल – पत्ती/पत्ती-जैसे आकार: असममित त्रिज्या मान जैसे ही आप कोने के मानों में संशोधन करते हैं, इंटरैक्टिव प्रीव्यू स्वचालित रूप से समायोजित हो जाती है और आपको प्रभाव को तुरंत देखने में मदद करती है।
कैसे उपयोग करें
- अपना समायोजन मोड चुनें: सभी कोनों को एकसमान गोलाकार बनाने के लिए जोड़ें या प्रत्येक कोने को स्वतंत्र रूप से समायोजित करने के लिए अलग करें। यह उपकरण सभी चार कोनों (ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ) का दृश्य प्रतिनिधित्व प्रदर्शित करता है।
- कोने की त्रिज्या को समायोजित करने के लिए स्लाइडर्स को खींचें या पिक्सेल मान दर्ज करें। मानों में परिवर्तन करते हुए पूर्वावलोकन तत्व के रीयल-टाइम अपडेट को देखें। प्रतिक्रियाशील या आकृति-आधारित गोलाकारण के लिए प्रतिशत मोड का उपयोग करें।
- प्रत्येक कोने के लिए अलग-अलग क्षैतिज और ऊर्ध्वाधर त्रिज्याएँ सेट करने तथा गोल कोनों के बजाय अंडाकार कोने बनाने हेतु एलिप्स मोड (उन्नत) को सक्षम करें। इससे स्वाभाविक, ब्लॉब-जैसे आकृतियाँ प्राप्त होती हैं।
- गैलरी से प्रीसेट आकृतियाँ चुनें: वृत्त, अंडाकार, पत्ता, फूल, टॉक ब्लॉब, टैब आकृति और अन्य। किसी प्रीसेट पर क्लिक करने से पूर्वावलोकन में संबंधित सीमा-त्रिज्या मान तुरंत लागू हो जाते हैं।
- तीखे कोनों वाली और गोलाकार स्थितियों के बीच पूर्वावलोकन को बदलकर मूल और गोलाकार स्वरूप की तुलना करें। इससे आपको अपने CSS द्वारा होने वाले सटीक परिवर्तन को देखने में मदद मिलेगी।
- आउटपुट पैनल से borderRadius CSS कोड की कॉपी करें। यहाँ संक्षिप्त रूप (जैसे, border-radius: 10px 20px;) और व्यक्तिगत गुण (जैसे, border-top-left-radius) दोनों उपलब्ध हैं।
उदाहरण
इनपुट: TL:20px TR:20px BL:0 BR:0
प्रक्रिया:
Apply asymmetric radius to cornersपरिणाम: border-radius: 20px 20px 0 0;
इनपुट: All: 50%
प्रक्रिया:
50% on all corners creates circle/ellipseपरिणाम: border-radius: 50%; (Creates circle)
संबंधित खोजें
लोग यह भी खोजते हैं: बॉर्डर रेडियस जनरेटर, सीएस बॉर्डर त्रिज्या, गोलाकार किनारे, बॉर्डर व्यास।
बॉर्डर रेडियस जनरेटरसीएस बॉर्डर त्रिज्यागोलाकार किनारेबॉर्डर व्यास
अक्सर पूछे जाने वाले प्रश्न
मैं एक परफेक्ट वृत्त कैसे बना सकता हूँ?
एक आदर्श वृत्त बनाने के लिए, तत्व वर्गाकार होना चाहिए (चौड़ाई और ऊँचाई समान) तथा border-radius को 50% पर सेट करें। 200×200 पिक्सल के अवतार के लिए, width: 200 पिक्सल; height: 200 पिक्सल; border-radius: 50% उपयोग करें। यदि तत्व वर्गाकार नहीं है, तो 50% का मान वृत्त के बजाय अंडाकार बना देता है। निश्चित आयामों वाले न होने वाले प्रतिक्रियाशील वृत्तों के लिए, aspect-ratio: 1 के साथ width और border-radius दोनों को 50% पर सेट करें।
अधिकतम सीमा-त्रिज्या मान क्या है?
CSS में 'border-radius' के लिए कोई सख्त अधिकतम मान नहीं है। तत्व के आकार के आधे से बड़े मान केवल पूर्ण गोलाकार प्रभाव पैदा करते हैं। गोलाकार बटनों के लिए सामान्य प्रथा ऐसे बहुत बड़े मानों जैसे 9999px या 9999em का उपयोग करना है — यह तत्व की ऊँचाई की परवाह किए बिना पूर्ण रूप से गोल किनारों की गारंटी देता है। 50% का उपयोग करने पर अण्डाकार कोने बनते हैं (रेडियस की आधी चौड़ाई और आधी ऊँचाई), जबकि 9999px का उपयोग करने पर अधिक वृत्ताकार अर्ध-कैप्स बनते हैं।
क्या मैं CSS ट्रांज़िशन के साथ बॉर्डर-रेडियस को एनीमेट कर सकता हूँ?
हाँ, बॉर्डर-रेडियस को एनीमेट किया जा सकता है। आप विभिन्न बॉर्डर-रेडियस मानों के बीच सुचारु रूप से संक्रमण कर सकते हैं: .element { border-radius: 0; transition: border-radius 0.3s ease; } .element: hover { border-radius: 20px; }. इससे होवर पर या क्लास परिवर्तन पर सुचारु मॉर्फिंग प्रभाव उत्पन्न होते हैं। प्रतिशत और पिक्सेल मानों के बीच एनीमेशन आधुनिक ब्राउज़रों में काम करता है, हालाँकि इंटरपोलेशन हमेशा पूरी तरह सुचारु नहीं होता।
मेरी टेबल या छवि पर `borderRadius` क्यों काम नहीं कर रहा है?
बॉर्डर-रेडियस को दिखाई देने के लिए ओवरफ्लो: हिडन (पैरेंट पर) या प्रॉपर डिस्प्ले प्रॉपर्टीज़ की आवश्यकता होती है। छवियों के लिए, बॉर्डर-रेडियस छवि की सामग्री को सीमित करता है। तालिकाओं के लिए, बॉर्डर-रेडियस को टेबल सेल्स पर कार्य करने के लिए आपको बॉर्डर-कॉलैप्स: सेपरेट की आवश्यकता हो सकती है। यदि गोल कोने दिखाई नहीं दे रहे हैं, तो जाँचें कि क्या किसी जगह ओवरफ्लो: हिडन लागू है जो इस प्रभाव को सीमित कर रहा है, या फिर क्या बॉर्डर-रेडियस को अधिक विशिष्ट CSS सेलेक्टर्स द्वारा ओवरराइड किया जा रहा है।
मैं एक पत्ती या जैविक ब्लॉब आकार कैसे बनाऊँ?
पत्तियों के आकारों के लिए, विपरीत कोनों में बहुत भिन्न त्रिज्याओं वाले असममित सीमा-त्रिज्या मानों का उपयोग करें (उदाहरण के लिए, क्षैतिज पत्ती के लिए: border-radius: 0 100px 0 100px)। जैविक ब्लॉब आकारों के लिए, विभिन्न क्षैतिज/लंबवत त्रिज्याओं वाले 8-मान वाले दीर्घवृत्त सिंटैक्स का उपयोग करें (उदाहरण के लिए: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%)। CSS स्मूथ ब्लॉब आकार बना सकता है — इंटरैक्टिव ब्लॉब प्रभावों के लिए इसे एनीमेशन के साथ संयोजित करें।