CSS border-radius जनरेटर
स्लाइडर खींचें या प्रीसेट चुनें — आकृति लाइव देखें और एक क्लिक में border-radius CSS कॉपी करें।
मोडइकाई
प्रीसेट
प्रीव्यू — जब आस-पास के रेडियस ओवरलैप करते हैं तो ब्राउज़र उन्हें सिकोड़ देता है, इसलिए प्रीव्यू ही असली परिणाम है।
इसका उपयोग कैसे करें
- स्क्रीन पर पहले से एक राउंडेड कार्ड (16px) है — रेडियस स्लाइडर खींचें या इकाई (px / %) बदलें, सब कुछ लाइव अपडेट होता है, कोई बटन दबाने की ज़रूरत नहीं।
- चिप से मोड बदलें: “सभी कोने” एक स्लाइडर चलाता है, “कोने हिसाब से” चारों कोने अलग-अलग एडिट करता है (TL, TR, BR, BL), “दीर्घवृत्ताकार” हर कोने पर क्षैतिज और ऊर्ध्वाधर रेडियस जोड़ता है (स्लैश सिंटैक्स)।
- किसी प्रीसेट (शार्प, राउंडेड कार्ड, सर्कल, पिल, लीफ, ब्लॉब) पर क्लिक करें — बनी-बनाई आकृति तुरंत आ जाती है, मोड और इकाई अपने बदल जाते हैं। पूरी border-radius घोषणा एक क्लिक में कॉपी करें।
उदाहरण
प्रीसेट
राउंडेड कार्ड
border-radius CSS
border-radius: 16px;
लीफ प्रीसेट (कोने हिसाब से, 0 / 50% / 0 / 50%) घटकर border-radius: 0% 50%; बन जाता है, और ब्लॉब प्रीसेट दीर्घवृत्ताकार रूप border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; देता है। जब कोने एक-दूसरे के मिरर होते हैं तो छोटा शॉर्टहैंड इस्तेमाल होता है — बिल्कुल CSS शॉर्टहैंड नियमों की तरह।
दायरा, सीमाएँ और आम सवाल
- सिर्फ़ border-radius: कोई iOS-स्टाइल smooth/continuous कोने (squircle) नहीं — उनके लिए clip-path या SVG चाहिए और वे दायरे से बाहर हैं।
- मौजूदा CSS मान पेस्ट नहीं किए जाते: हर मान स्लाइडर, प्रीसेट और मोड चिप से आता है, इसलिए ग़लत पार्स होने का सवाल नहीं।
- जब आस-पास के रेडियस मिलाकर किसी भुजा से ज़्यादा हो जाएँ, तो ब्राउज़र उन्हें अनुपात में सिकोड़ देता है। प्रीव्यू असली रेंडर किया हुआ परिणाम है; कोड बॉक्स में वही मान दिखते हैं जो आपने सेट किए हैं।
- पिल प्रीसेट 9999px देता है — “जितना गोल मुमकिन है” के लिए कम्युनिटी का शॉर्टहैंड; ब्राउज़र उसे छोटी भुजा के आधे तक सीमित कर देता है।
- प्रतिशत हर अक्ष पर अलग से नापे जाते हैं: क्षैतिज रेडियस चौड़ाई के हिसाब से, ऊर्ध्वाधर रेडियस ऊँचाई के हिसाब से (प्रीव्यू चौकोर है, इसलिए वहाँ दोनों एक जैसे दिखते हैं)। दूसरे साइज़ के एलिमेंट पर वही प्रतिशत आकृति बदल देता है।
- कुछ भी सेव नहीं होता और लिंक में पैरामीटर देकर शेयर नहीं होता: रीफ़्रेश करने पर डिफ़ॉल्ट राउंडेड कार्ड वापस आ जाता है। सब कुछ आपके ब्राउज़र में चलता है।
संबंधित टूल
जब बॉक्स को थोड़ा और स्टाइल करना हो।