बॉर्डर रेडियस जनरेटर
CSS border-radius गुण बनाएँ
इनपुट और विकल्प
त्वरित प्रीसेट और उदाहरण
आपके ब्राउज़र में चलता है। आपका इनपुट इसी डिवाइस पर रहता है।
परिणाम
परिणाम देखने के लिए अपने मान दर्ज करें।
बॉर्डर रेडियस जनरेटर के बारे में
हमारा मुफ़्त CSS बॉर्डर रेडियस जनरेटर किसी भी HTML एलिमेंट के गोल कोनों पर आपको पूरा दृश्य नियंत्रण देता है। हर कोने को अलग से समायोजित करें या सबको एक साथ जोड़ दें, कई इकाइयों (px, %, em, rem) में से चुनें और लाइव पूर्वावलोकन पैनल में नतीजे तुरंत देखें।
गोल कोने आधुनिक वेब डिज़ाइन का बुनियादी हिस्सा हैं। कार्ड और इनपुट पर हल्के 4px गोलाई से लेकर अवतार के लिए पूरे 50% वृत्त तक, border-radius प्रॉपर्टी तय करती है कि उपयोगकर्ता आपके इंटरफ़ेस को कैसे देखते हैं। यह टूल अंदाज़ा लगाए बिना और बार-बार ब्राउज़र रीफ़्रेश किए बिना ज़रूरी सटीक मान खोजना आसान बनाता है।
जनरेटर में वर्ग, वृत्त, पिल, टियरड्रॉप और ऑर्गेनिक जैसे 10 प्रीसेट आकार हैं, साथ ही रचनात्मक प्रयोग के लिए एक रैंडम जनरेटर भी है। आउटपुट कई फ़ॉर्मेट में मिलता है, जिनमें CSS शॉर्टहैंड, अलग-अलग कोने की प्रॉपर्टी, उपयोग के लिए तैयार CSS क्लास और लगभग समतुल्य Tailwind CSS शामिल हैं।
मुख्य सुविधाएँ
- हर कोने पर अलग नियंत्रण: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ और नीचे-बाएँ
- चारों कोनों पर एक समान रेडियस समायोजन के लिए कोने जोड़ने का टॉगल
- रेस्पॉन्सिव डिज़ाइन के लिए चार इकाई विकल्प: पिक्सेल (px), प्रतिशत (%), em और rem
- समायोज्य एलिमेंट आकार (100-300px) और कस्टम कलर पिकर के साथ रीयल-टाइम पूर्वावलोकन
- 10 प्रीसेट आकार: वर्ग, गोलाकार, वृत्त, पिल, ऊपर गोल, नीचे गोल, बाएँ गोल, दाएँ गोल, टियरड्रॉप और ऑर्गेनिक
- हर कोने पर सटीक रेडियस दिखाने वाले दृश्य कोना मान संकेतक
- रचनात्मक प्रेरणा और प्रयोग के लिए रैंडम रेडियस जनरेटर
- कई CSS आउटपुट फ़ॉर्मेट: शॉर्टहैंड, अलग-अलग प्रॉपर्टी, CSS क्लास और Tailwind CSS अनुमानित समतुल्य
- अपने प्रोजेक्ट में तुरंत इस्तेमाल के लिए क्लिपबोर्ड पर एक-क्लिक कॉपी
- सहज मान समायोजन के लिए रेंज प्रदर्शन के साथ स्लाइडर नियंत्रण
बॉर्डर रेडियस जनरेटर का उपयोग कैसे करें
- अपनी इकाई चुनें: निश्चित आकार के लिए px, रेस्पॉन्सिव स्केलिंग के लिए % या टाइपोग्राफ़ी-आधारित आकार के लिए em/rem चुनें।
- कोने के मान समायोजित करें: हर कोने की गोलाई अलग से तय करने के लिए स्लाइडर का उपयोग करें, या एक समान गोलाई के लिए "सभी कोने जोड़ें" चालू करें।
- प्रीसेट आकार आज़माएँ: आम कॉन्फ़िगरेशन तुरंत लागू करने के लिए वृत्त, पिल या टियरड्रॉप जैसे 10 प्रीसेट आकारों में से किसी पर क्लिक करें।
- नतीजा देखें: समायोज्य आकार और रंग वाला लाइव पूर्वावलोकन देखें और जानें कि आपका बॉर्डर रेडियस ठीक कैसा दिखेगा।
- CSS कॉपी करें: border-radius CSS कोड लेने के लिए कॉपी पर क्लिक करें, या अलग-अलग प्रॉपर्टी या Tailwind क्लास के लिए वैकल्पिक फ़ॉर्मेट अनुभाग का उपयोग करें।
उपयोग के मामले
- बटन स्टाइलिंग: पिल आकार के बटन, हल्की गोलाई वाले कॉल-टू-एक्शन बटन या पूरी तरह गोल आइकन बटन बनाएँ।
- कार्ड कंपोनेंट: अपने डिज़ाइन सिस्टम में कार्ड, मोडल और डायलॉग बॉक्स पर एक जैसे गोल कोने लगाएँ।
- अवतार इमेज: वर्गाकार इमेज पर 50% border-radius लगाकर उपयोगकर्ता अवतार और प्रोफ़ाइल फ़ोटो को पूरी तरह गोल बनाएँ।
- इनपुट फ़ील्ड: आधुनिक रूप के लिए फ़ॉर्म इनपुट, टेक्स्टएरिया और चयन ड्रॉपडाउन में हल्की गोलाई जोड़ें।
- नेविगेशन एलिमेंट: टैब, बैज, टैग और नेविगेशन आइटम को उचित कोना गोलाई के साथ स्टाइल करें।
- रचनात्मक आकार: असममित कोना मानों को मिलाकर ऑर्गेनिक ब्लॉब, टियरड्रॉप और अनोखे सजावटी एलिमेंट बनाएँ।
- टूलटिप और पॉपओवर डिज़ाइन: टूलटिप, पॉपओवर और ड्रॉपडाउन मेनू पर सटीक कोना गोलाई लगाएँ।
- रेस्पॉन्सिव डिज़ाइन टोकन: em या rem इकाइयों से अपने पूरे प्रोजेक्ट में एक जैसे border-radius मान तय करें।
अक्सर पूछे जाने वाले प्रश्न
क्या यह टूल मुफ़्त है?
हाँ, बॉर्डर रेडियस जनरेटर पूरी तरह मुफ़्त है और इस पर कोई प्रतिबंध नहीं है। आप इसे जितनी बार चाहें, पंजीकरण या भुगतान के बिना इस्तेमाल कर सकते हैं।
क्या मेरा डेटा सुरक्षित है?
बिल्कुल। यह टूल पूरी तरह आपके ब्राउज़र में चलता है। कोई डेटा किसी सर्वर पर नहीं भेजा जाता, इसलिए आपकी सेटिंग और बनाया गया CSS कोड आपके डिवाइस पर निजी रहते हैं।
border-radius के लिए px और % में क्या अंतर है?
पिक्सेल (px) मान एलिमेंट के आकार की परवाह किए बिना निश्चित रेडियस बनाते हैं। प्रतिशत (%) मान एलिमेंट के आयामों के सापेक्ष होते हैं, जिससे वे रेस्पॉन्सिव बनते हैं। उदाहरण के लिए, वर्गाकार एलिमेंट पर 50% एक पूरा वृत्त बनाता है।
CSS से पूरी तरह गोल वृत्त कैसे बनाऊँ?
बराबर चौड़ाई और ऊँचाई वाले एलिमेंट पर border-radius को 50% पर सेट करें। इस टूल का वृत्त प्रीसेट ठीक यही कॉन्फ़िगरेशन लागू करता है।
क्या border-radius सभी ब्राउज़रों में समर्थित है?
हाँ, border-radius CSS प्रॉपर्टी Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़रों में पूरी तरह समर्थित है। किसी वेंडर प्रीफ़िक्स की ज़रूरत नहीं है।
सुझाव और सर्वोत्तम तरीके
- एक जैसे मान इस्तेमाल करें: दृश्य एकरूपता के लिए अपने डिज़ाइन सिस्टम में 2-3 मानक border-radius मान (जैसे 4px, 8px, 16px) तय करें।
- वृत्त के लिए प्रतिशत इस्तेमाल करें: वर्गाकार एलिमेंट पर 50% सेट करें ताकि आकार बदलने पर भी पूरे वृत्त अपने आप स्केल हों।
- फ़ॉर्म के लिए हल्का रखें: साफ़ और पेशेवर रूप बनाए रखने के लिए इनपुट फ़ील्ड और फ़ॉर्म एलिमेंट में छोटे मान (2-8px) सबसे अच्छे रहते हैं।
- असममित कोने आज़माएँ: हर कोने पर अलग मान अनोखे आकार बनाते हैं जो सजावटी एलिमेंट में चरित्र जोड़ सकते हैं।
- रेस्पॉन्सिव इकाइयों पर विचार करें: ऐसे border-radius मानों के लिए em या rem इस्तेमाल करें जो आपकी टाइपोग्राफ़ी के अनुपात में स्केल हों।
- सामग्री के साथ परखें: हमेशा देखें कि एलिमेंट के अंदर असली सामग्री होने पर गोल कोने कैसे दिखते हैं, ख़ासकर अलग-अलग व्यूपोर्ट आकारों में।