श्रेणी: डेवलपर टूल
CSS बॉर्डर रेडियस जेनरेटर
हर कोना अलग गोल करें, तुरंत पूर्वावलोकन के साथ
हर कोने के लिए एक स्लाइडर खिसकाएँ और border-radius घोषणा कॉपी करें। दीर्घवृत्तीय कोने चालू करने पर वह स्लैश वाला रूप मिलता है जो जैविक आकृतियाँ बनाता है।
border-radius: 12px;
पूर्वावलोकन एक वास्तविक तत्व है जिस पर बना हुआ मान लगाया गया है, इसलिए जो दिखता है वही ब्राउज़र बनाता है।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
border-radius तब तक एक ही संख्या जैसा लगता है जब तक तीन कोने अलग न करने पड़ें, और तभी संक्षिप्त रूप उलझाता है: चारों मान ऊपर बाएँ से घड़ी की दिशा में चलते हैं, और स्लैश वाला रूप हर कोने को स्लैश से पहले क्षैतिज त्रिज्या और बाद में ऊर्ध्वाधर त्रिज्या देता है। यही दूसरा रूप वे कोमल, असममित आकृतियाँ बनाता है जो गोल डिब्बे के बजाय जैविक लगती हैं। यहाँ हर कोने के लिए स्लाइडर है, चित्र के बजाय वास्तविक तत्व पर मान लगा हुआ है, और आउटपुट वैसे ही संक्षिप्त होता है जैसे कोई व्यक्ति लिखता: चारों कोने समान हों तो चार के बजाय एक ही मान।
इस्तेमाल कैसे करें
- इकाई चुनें और कोनों को अलग रखना हो तो उनकी जोड़ी तोड़ दें।
- हर कोना तब तक खिसकाएँ जब तक पूर्वावलोकन सही न लगे।
- जैविक आकृति के लिए दीर्घवृत्तीय कोने चालू करें, फिर घोषणा कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- मान में स्लैश का क्या अर्थ है?
- स्लैश से पहले का हिस्सा हर कोने की क्षैतिज त्रिज्या है और बाद का ऊर्ध्वाधर। दोनों ओर अलग मान होने पर चौथाई वृत्त के बजाय दीर्घवृत्त बनता है।
- प्रतिशत लें या पिक्सल?
- पिक्सल हर आकार पर वही वक्रता रखते हैं, जो बटन और कार्ड को प्रायः चाहिए। प्रतिशत तत्व के साथ बढ़ते हैं: वर्ग पर 50 प्रतिशत देने से वृत्त बन जाता है।
- मेरा आउटपुट चार मानों से छोटा क्यों है?
- CSS दोहराए गए कोनों को समेट देता है और यह टूल भी: चारों कोने समान हों तो एक मान, विकर्ण जोड़ी समान हो तो दो। परिणाम वही रहता है, बस लिखावट छोटी होती है।