CSS बॉर्डर रेडियस जनरेटर
गोल कोने विज़ुअली सेट करें: सभी कोनों को साथ जोड़ें या हर एक अलग बदलें, px या % में, सर्कल और ऑर्गेनिक आकृतियाँ बनाएँ, और CSS, SCSS या Tailwind कोड कॉपी करें।
CSS बॉर्डर रेडियस जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
CSS बॉर्डर रेडियस जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर CSS बॉर्डर रेडियस जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
CSS की border-radius प्रॉपर्टी बॉक्स, बटन, कार्ड और इमेज के कोने गोल करती है। यह बॉर्डर रेडियस जनरेटर आपको स्लाइडर खिसकाकर लाइव प्रीव्यू में आकार बदलते देखने और फिर कोड कॉपी करने देता है।
बराबर गोलाई के लिए चारों कोने जोड़ें, या उन्हें अलग करके हर कोने को अलग आकार दें: हल्के गोल कार्ड से लेकर पूरे सर्कल और ऑर्गेनिक ब्लॉब तक।
इसे कैसे इस्तेमाल करें
- सभी कोने एक साथ गोल करने के लिए स्लाइडर खिसकाएँ, या कोनों को अलग करके हर एक सेट करें।
- तय गोलाई के लिए px और एलिमेंट के साथ बढ़ने घटने वाली आकृतियों के लिए % के बीच बदलें।
- प्रीसेट इस्तेमाल करें: स्क्वेयर, राउंडेड, सर्कल और दूसरे, या ब्लॉब के लिए रैंडम करें।
- अपने डिज़ाइन से मिलाने के लिए प्रीव्यू बॉक्स का रंग और बैकग्राउंड बदलें।
- CSS, SCSS या Tailwind कोड कॉपी करें।
आम आकृतियाँ
| आकृति | CSS |
|---|---|
| हल्का गोल कार्ड | border-radius: 8px; |
| पिल बटन | border-radius: 9999px; |
| सर्कल (चौकोर एलिमेंट) | border-radius: 50%; |
| एक गोल कोना | border-radius: 0 24px 0 0; |
| पत्ती | border-radius: 0 50% 0 50%; |
सुझाव
- प्रतिशत वैल्यू एलिमेंट के साइज़ के साथ बदलती हैं, इसलिए हर स्क्रीन पर आकार एक जैसा रहता है।
- नेस्टेड एलिमेंट: बराबर वक्रों के लिए अंदर वाले एलिमेंट का रेडियस उसके पैरेंट से कम रखें (बाहरी रेडियस घटा पैडिंग)।
- इमेज के लिए पैरेंट पर overflow: hidden चाहिए, या रेडियस सीधे img पर लगाएँ।
- एकरूपता रखें: पूरे डिज़ाइन सिस्टम में दो या तीन रेडियस साइज़ इस्तेमाल करें।
बॉक्स शैडो जनरेटर से गहराई जोड़ें, और फ़्लेक्सबॉक्स जनरेटर से लेआउट बनाएँ।
अक्सर पूछे जाने वाले सवाल
CSS से सर्कल कैसे बनाएँ?
किसी चौकोर एलिमेंट को border-radius: 50% दें। आयत पर यही वैल्यू अंडाकार बनाती है।
क्या सिर्फ़ कुछ कोने गोल कर सकते हैं?
हाँ। कोनों को अलग करके हर एक सेट करें, या चार वैल्यू वाला सिंटैक्स इस्तेमाल करें: ऊपर बायाँ, ऊपर दायाँ, नीचे दायाँ, नीचे बायाँ।
px इस्तेमाल करें या %?
बटन और कार्ड पर एक जैसी गोलाई के लिए px, और सर्कल जैसी आकृतियों के लिए % इस्तेमाल करें जो एलिमेंट के साथ बदलनी चाहिए।
पिल आकार का बटन कैसे बनाएँ?
9999px जैसा बहुत बड़ा रेडियस इस्तेमाल करें। बटन की ऊँचाई कुछ भी हो, कोने पूरे गोल हो जाते हैं।
क्या Tailwind क्लास मिल सकती हैं?
हाँ। Tailwind एक्सपोर्ट चुनें और अपनी आकृति के लिए rounded क्लास या आर्बिट्रेरी वैल्यू पाएँ।
क्या border-radius इमेज पर काम करता है?
हाँ। इसे img एलिमेंट पर लगाएँ, या overflow: hidden वाले पैरेंट पर।