CSS बॉर्डर-रेडियस जनरेटर

CSS बॉर्डर-रेडियस जनरेटर क्या है?

CSS बॉर्डर-रेडियस जनरेटर CSS की border-radius प्रॉपर्टी के लिए एक निःशुल्क विज़ुअल एडिटर है, जो फ्रंट-एंड डेवलपर और डिज़ाइनर के लिए बनाया गया है। रेंज स्लाइडर और संख्या इनपुट का उपयोग करके हर कोने की क्षैतिज और ऊर्ध्वाधर त्रिज्या को पिक्सेल में सेट करें, एक इकाई चुनें, और अंडाकार कोनों के स्लैश सिंटैक्स के लिए दीर्घवृत्तीय मोड चालू करें। एक पूर्वावलोकन बॉक्स गोल आकृति को वास्तविक समय में दिखाता है, और कॉपी करने के लिए सघन संक्षिप्त घोषणा तैयार की जाती है। तेज़ी से शुरू करने के लिए सेगमेंटेड कंट्रोल से Rounded, Pill, Circle या एक ऑर्गेनिक Blob जैसा प्रीसेट चुनें, फिर किसी भी कोने को बारीकी से समायोजित करें। कोनों का क्रम याद किए बिना नरम कार्ड, पिल बटन, सटीक वृत्त, स्क्वर्कल और बूंद जैसी सजावटी आकृतियाँ डिज़ाइन करने के लिए इसका उपयोग करें।

CSS बॉर्डर-रेडियस जनरेटर का उपयोग कैसे करें

1. शुरुआती आकृति लोड करने के लिए सेगमेंटेड कंट्रोल से एक प्रीसेट (Rounded, Pill, Circle या Blob) चुनें।
2. उस कोने की क्षैतिज त्रिज्या सेट करने के लिए हर कोने के रेंज स्लाइडर को खींचें या एक संख्या टाइप करें।
3. हर कोने में दूसरी ऊर्ध्वाधर त्रिज्या प्रकट करने और स्लैश सिंटैक्स के साथ अंडाकार कोने बनाने के लिए Elliptical चालू करें।
4. सेटिंग्स में इकाई (px या %) चुनें; प्रतिशत त्रिज्या को बॉक्स के आकार के अनुसार मापते हैं।
5. लाइव पूर्वावलोकन को अपडेट होते देखें, फिर तैयार किए गए संक्षिप्त border-radius को अपनी स्टाइलशीट में कॉपी करें।

उदाहरण

चारों कोने 16, दीर्घवृत्तीय बंद

border-radius: 16px;

प्रीसेट Pill, सभी कोने 9999

border-radius: 9999px;

ऊपर-बाएँ 40/20, ऊपर-दाएँ 10, नीचे-दाएँ 40/20, नीचे-बाएँ 10, दीर्घवृत्तीय चालू

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

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

चारों कोने किस क्रम में होते हैं?

संक्षिप्त रूप कोनों को ऊपर-बाएँ से शुरू करते हुए दक्षिणावर्त सूचीबद्ध करता है: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ। यह टूल हमेशा चारों मानों को इसी क्रम में आउटपुट करता है, इसलिए परिणाम स्पष्ट होता है और बाद में हाथ से बदलना आसान रहता है।

दीर्घवृत्तीय मोड क्या करता है?

border-radius प्रति कोना एक क्षैतिज और एक ऊर्ध्वाधर त्रिज्या ले सकता है, जिन्हें स्लैश से अलग किया जाता है, ताकि वृत्ताकार के बजाय अंडाकार (दीर्घवृत्तीय) कोने बनें। हर कोने के लिए दूसरी ऊर्ध्वाधर त्रिज्या सेट करने हेतु Elliptical चालू करें; तब आउटपुट 'क्षैतिज / ऊर्ध्वाधर' स्लैश सिंटैक्स का उपयोग करता है।

मुझे px का उपयोग करना चाहिए या प्रतिशत का?

पिक्सेल बॉक्स की परवाह किए बिना एक निश्चित कोना आकार देते हैं। प्रतिशत बॉक्स की चौड़ाई और ऊँचाई के सापेक्ष होते हैं, इसलिए हर कोने पर 50% एक वर्ग को सटीक वृत्त में बदल देता है और तत्व का आकार बदलने पर गोलाई भी मापित होती है। सेटिंग्स में इकाई बदलें।

सटीक वृत्त या पिल कैसे बनाऊँ?

वर्ग से वृत्त बनाने के लिए Circle प्रीसेट (हर कोने पर 50%) चुनें, या छोटी भुजाओं को पूर्ण अर्धवृत्त बनाने के लिए Pill प्रीसेट (एक बहुत बड़ी पिक्सेल त्रिज्या) चुनें। आप किसी प्रीसेट से शुरू करके अलग-अलग कोनों को भी बारीकी से समायोजित कर सकते हैं।

क्या मेरा डेटा कहीं अपलोड होता है?

नहीं। जनरेटर पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है — आपके त्रिज्या मान कभी किसी सर्वर पर नहीं भेजे जाते, इसलिए यह निजी रूप से काम करता है और पेज लोड हो जाने के बाद ऑफ़लाइन भी।