CSS बॉर्डर रेडियस जेनरेटर

बॉर्डर रेडियस जेनरेटर क्या है?

हर कोने का रेडियस अलग से सेट करें, चाहें तो एलिप्टिकल कोनों के लिए अलग क्षैतिज और ऊर्ध्वाधर रेडियस के साथ, px या % में। टूल आकार का प्रीव्यू दिखाता है और सबसे छोटा समतुल्य border-radius शॉर्टहैंड लिखता है।

बॉर्डर रेडियस जेनरेटर का उपयोग कैसे करें

1. कोई प्रीसेट (Rounded, Pill, Circle, Blob, Leaf, Ticket) चुनें या वैल्यू खुद सेट करें।
2. Unit (px या %) चुनें और अलग X/Y रेडियस चाहिए तो Elliptical corners चालू करें।
3. हर कोना (Top left, Top right, Bottom right, Bottom left) बदलें; सभी को एक साथ बदलने के लिए Link all corners टिक करें।
4. अपने आकार में शेप देखने के लिए Preview settings में चौड़ाई, ऊँचाई और रंग बदलें।
5. CSS कोड कॉपी करें।

उदाहरण

Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

बॉर्डर रेडियस जेनरेटर का उपयोग कब करें

इसे गोल कोनों वाले कार्ड, पिल, अवतार और सिर्फ़ CSS से बने ऑर्गेनिक ब्लॉब आकारों के लिए इस्तेमाल करें। प्रतिशत एलिमेंट के साथ स्केल होते हैं (वर्ग पर 50% वृत्त देता है)। मनमाने बहुभुज या सीधे कट वाले आकारों के लिए Clip Path Generator और कई पॉइंट वाले जटिल ऑर्गेनिक आकारों के लिए SVG Blob Generator चुनें।

बॉर्डर रेडियस जेनरेटर कैसे काम करता है

CSS की ज़रूरत के अनुसार कोने क्रम में हैं: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ। चार वैल्यू के हर समूह को मानक शॉर्टहैंड नियमों से छोटा किया जाता है: चौथी वैल्यू दूसरी के बराबर हो तो हटती है, तीसरी पहली के बराबर हो तो हटती है, और दूसरी पहली के बराबर हो तो हटती है। एलिप्टिकल कोनों में ऊर्ध्वाधर रेडियस स्लैश के बाद आते हैं (h / v); जब हर ऊर्ध्वाधर रेडियस अपने क्षैतिज रेडियस के बराबर हो तो स्लैश वाला हिस्सा छोड़ दिया जाता है।

सामान्य उपयोग मामले

• ✓ पिल आकार के बटन और टैग
• ✓ गोल अवतार
• ✓ 8-वैल्यू एलिप्टिकल रेडियस वाली ऑर्गेनिक ब्लॉब इमेज
• ✓ टिकट या पत्ती के आकार के कार्ड
• ✓ असममित स्पीच-बबल कोने

अक्सर पूछे जाने वाले प्रश्न

और श्रेणियाँ देखें