लाइव प्रीव्यू के साथ सिंपल, पर-कॉर्नर या ब्लॉब-शेप border-radius CSS बनाएं। सब कुछ आपके ब्राउज़र में ही होता है।
CSS Border Radius Generator ऑनलाइन
लाइव प्रीव्यू के साथ सिंपल, पर-कॉर्नर या ब्लॉब-शेप border-radius CSS बनाएं। सब कुछ आपके ब्राउज़र में ही होता है।
CSS Border Radius Generator पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा डाली गई वैल्यू और जनरेट हुआ CSS कभी आपकी डिवाइस से बाहर नहीं जाता और ArrayKit पर अपलोड नहीं होता।
CSS Border Radius Generator एक border-radius डिक्लेरेशन बनाता है जिसे आप सीधे अपनी स्टाइलशीट में पेस्ट कर सकते हैं, साथ ही एक लाइव प्रीव्यू बॉक्स भी है जो वैल्यू बदलते ही अपडेट होता है। सभी चार कोनों पर एक ही रेडियस के लिए Simple मोड, हर कोने को अलग-अलग गोल करने के लिए Per-corner मोड, और डिज़ाइनर्स द्वारा ऑर्गैनिक, हाथ से बनाए गए आकार जैसा दिखाने के लिए इस्तेमाल होने वाले 8-वैल्यू इलिप्टिकल फॉर्म के लिए Blob मोड के बीच स्विच करें। px, %, या rem चुनें, वैल्यू को ड्रैग करें, या Blob मोड में Randomize बटन दबाकर ऐसे आकार खोजें जो आप खुद टाइप नहीं करते। यह बटन, कार्ड, अवतार, हीरो ब्लॉब और किसी भी ऐसे कॉम्पोनेंट के लिए उपयोगी है जहां CSS कन्फर्म करने से पहले गोल कोनों का दिखना बिल्कुल सही होना चाहिए। यह फ्रंट-एंड डेवलपर्स और डिज़ाइनरों के लिए बनाया गया है जिन्हें तुरंत विज़ुअल फीडबैक चाहिए। सब कुछ आपके ब्राउज़र में लोकली चलता है — कोई भी स्टाइल या मार्कअप कहीं अपलोड नहीं होता।
विशेषताएँ
Simple मोड एक वैल्यू और स्लाइडर से सभी चार कोनों को गोल करता है
Per-corner मोड टॉप-लेफ्ट, टॉप-राइट, बॉटम-राइट और बॉटम-लेफ्ट को स्वतंत्र रूप से सेट करता है
Blob मोड ऑर्गैनिक आकारों के लिए 8-वैल्यू इलिप्टिकल border-radius जनरेट करता है
Blob मोड में एक-क्लिक Randomize बटन तेज़ी से आकार एक्सप्लोर करने के लिए
Simple और per-corner रेडियस के लिए px, %, और rem यूनिट्स के बीच स्विच करें
लाइव स्क्वेयर प्रीव्यू हर वैल्यू बदलते ही तुरंत अपडेट होता है
एक क्लिक में कॉपी के लिए तैयार CSS डिक्लेरेशन
पूरी तरह आपके ब्राउज़र में चलता है, कोई भी CSS कभी अपलोड नहीं होता
Border Radius Generator का उपयोग कैसे करें
Simple, Per-corner, या Blob मोड चुनें
स्लाइडर, नंबर फ़ील्ड, या ब्लॉब पर्सेंटेज एडजस्ट करें
लाइव प्रीव्यू बॉक्स को रीयल टाइम में अपडेट होते देखें
जनरेट किया गया border-radius CSS डिक्लेरेशन कॉपी करें
उदाहरण
इनपुट
all corners 12px
आउटपुट
border-radius: 12px;
चार बराबर कोने मिलकर एक ही border-radius वैल्यू बन जाते हैं।
सामान्य त्रुटियाँ और समस्या निवारण
ब्लॉब शेप ऑर्गैनिक ब्लॉब की बजाय गोल कोनों वाला रेक्टेंगल जैसा दिखता है। — पक्का करें कि हर कोने के हॉरिज़ॉन्टल और वर्टिकल पर्सेंटेज अलग हों — सभी कोनों पर बराबर H और V वैल्यू सिर्फ एक सिंपल गोल आकार बनाते हैं।
Per-corner CSS अचानक वापस एक ही वैल्यू में सिमट जाता है। — यह सामान्य है: जब सभी चार कोने बराबर होते हैं, तो CSS Border Radius Generator एक ही नंबर को चार बार दोहराने की बजाय छोटा सिंगल-वैल्यू शॉर्टहैंड देता है।
पर्सेंट रेडियस नॉन-स्क्वेयर एलिमेंट पर अलग दिखता है। — पर्सेंटेज border-radius एलिमेंट की अपनी चौड़ाई और ऊंचाई के सापेक्ष होता है, इसलिए वही पर्सेंट वैल्यू चौड़े रेक्टेंगल और स्क्वेयर पर अलग-अलग दिखती है — अपने असली एलिमेंट के आस्पेक्ट रेशियो पर टेस्ट करें।
बहुत छोटे एलिमेंट पर गोल कोना गायब हो जाता है। — border-radius एलिमेंट की सबसे छोटी साइड के आधे तक सीमित होता है, इसलिए छोटे बॉक्स पर बड़ा px रेडियस ओवरफ्लो होने की बजाय सीधे पूरी पिल या सर्कल बन जाता है।
अक्सर पूछे जाने वाले प्रश्न
CSS Border Radius Generator का Blob मोड असल में क्या बनाता है?
यह 8-वैल्यू इलिप्टिकल border-radius सिंटैक्स बनाता है — चार हॉरिज़ॉन्टल पर्सेंटेज, एक स्लैश, फिर चार वर्टिकल पर्सेंटेज, हर कोने के लिए एक जोड़ी — जो CSS में ऑर्गैनिक, हाथ से बने जैसे आकार बनाने की स्टैंडर्ड ट्रिक है।
क्या CSS Border Radius Generator पिक्सल की बजाय पर्सेंट या rem आउटपुट दे सकता है?
हां। Simple और Per-corner मोड में आप यूनिट को px, %, और rem के बीच बदल सकते हैं, और लाइव प्रीव्यू व जनरेट हुआ CSS तुरंत उसी हिसाब से अपडेट हो जाते हैं।
Per-corner मोड कभी-कभी चार की बजाय एक ही वैल्यू क्यों देता है?
जब सभी चार कोने बराबर हो जाते हैं, तो टूल अपने आप border-radius को छोटे सिंगल-वैल्यू फॉर्म में सिमेट देता है — यह वैलिड, बराबर CSS है और आपकी स्टाइलशीट को साफ रखता है।
क्या CSS Border Radius Generator मेरा डिज़ाइन या CSS कहीं अपलोड करता है?
नहीं। हर कैलकुलेशन और लाइव प्रीव्यू आपके ब्राउज़र में लोकली चलती है। आपके द्वारा डाली गई वैल्यू और जनरेट हुआ CSS कभी आपकी डिवाइस से बाहर नहीं जाता।
Blob मोड में Randomize बटन किसके लिए है?
यह एक क्लिक में सभी आठ ब्लॉब पर्सेंटेज को नई रैंडम वैल्यू से भर देता है, ताकि आप हर कोना खुद टाइप किए बिना ऑर्गैनिक आकार के वेरिएशन तेज़ी से एक्सप्लोर कर सकें।
क्या जनरेट हुआ border-radius CSS सभी मॉडर्न ब्राउज़र्स में सपोर्ट होता है?
हां। स्टैंडर्ड शॉर्टहैंड फॉर्म और 8-वैल्यू इलिप्टिकल ब्लॉब सिंटैक्स दोनों CSS Backgrounds and Borders स्पेक का हिस्सा हैं और हर मौजूदा प्रमुख ब्राउज़र में काम करते हैं।