यह टूल क्या करता है
बॉर्डर रेडियस जनरेटर से आप गोल कोनों को विज़ुअली आकार दे सकते हैं और सबसे छोटा CSS कॉपी कर सकते हैं। सभी कोनों के लिए एक रेडियस या हर कोने के लिए अलग रेडियस इस्तेमाल करें, हर कोने को अलग क्षैतिज और ऊर्ध्वाधर रेडियस देने के लिए दीर्घवृत्तीय कोने चालू करें, और खींचते समय प्रीव्यू बदलते देखें। यह px, %, rem और em में काम करता है, और आप मौजूदा border-radius वैल्यू पेस्ट करके एडिट कर सकते हैं। सब कुछ आपके ब्राउज़र में चलता है।
उपयोग कैसे करें
- किसी प्रीसेट से शुरू करें या सैंपल आकार रखें।
- इकाई चुनें। इकाई बदलने पर मौजूदा मान बदल दिए जाते हैं (rem और em 16px माने जाते हैं, % प्रीव्यू बॉक्स के सापेक्ष है)।
- एक स्लाइडर के लिए सभी कोनों का एक ही रेडियस चालू करें, या ऊपर बाएँ, ऊपर दाएँ, नीचे दाएँ और नीचे बाएँ अलग-अलग सेट करने के लिए बंद करें।
- हर कोने के लिए क्षैतिज और ऊर्ध्वाधर स्लाइडर पाने के लिए दीर्घवृत्तीय कोने चालू करें।
- चौड़ाई और ऊँचाई से प्रीव्यू का आकार बदलें, फिर CSS कार्ड से कोड कॉपी करें। चार अलग प्रॉपर्टी चाहिए तो लॉन्गहैंड आउटपुट चालू करें।
उदाहरण
.avatar { border-radius: 50%; }
.tab { border-radius: 12px 12px 0 0; }
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }जानने लायक बातें
- सबसे छोटा रूप। आउटपुट समान मानों को जोड़ देता है: चार एक जैसे कोने एक मान बन जाते हैं, और सभी कोने गोल होने पर स्लैश के बाद का हिस्सा हटा दिया जाता है।
- प्रतिशत बॉक्स के हिसाब से। क्षैतिज प्रतिशत एलिमेंट की चौड़ाई से और ऊर्ध्वाधर ऊँचाई से गिने जाते हैं, इसलिए आयत पर 50% दीर्घवृत्त देता है, वृत्त नहीं।
- न समाने वाले रेडियस ब्राउज़र एक साथ छोटे करता है — इसीलिए बहुत बड़ा px मान साफ़ पिल आकार देता है।
- चाइल्ड एलिमेंट और ओवरफ़्लो। गोल कोने बैकग्राउंड और बॉर्डर काटते हैं, पर चाइल्ड कंटेंट नहीं: बॉक्स के अंदर की इमेज काटने के लिए overflow: hidden जोड़ें।
अक्सर पूछे जाने वाले सवाल
› border-radius में स्लैश का क्या मतलब है?
स्लैश से पहले के मान क्षैतिज रेडियस हैं और बाद के मान ऊर्ध्वाधर। जब ये अलग होते हैं, तो कोना वृत्त की जगह दीर्घवृत्त का एक-चौथाई बन जाता है। जैसे 50% / 30% का वक्र 50% से ज़्यादा चपटा होता है।
› चारों कोने किस क्रम में लिखे जाते हैं?
ऊपर बाएँ से घड़ी की दिशा में: ऊपर बाएँ, ऊपर दाएँ, नीचे दाएँ, नीचे बाएँ। कम मान होने पर CSS उन्हें दोहराता है: दो मान ऊपर बाएँ/नीचे दाएँ और ऊपर दाएँ/नीचे बाएँ सेट करते हैं, तीन मान ऊपर बाएँ, ऊपर दाएँ/नीचे बाएँ और नीचे दाएँ सेट करते हैं।
› वृत्त या पिल आकार कैसे बनाएँ?
border-radius: 50% वर्ग को वृत्त और आयत को दीर्घवृत्त बना देता है। किसी भी चौड़ाई पर गोल सिरों वाले पिल के लिए 9999px जैसी बहुत बड़ी लंबाई इस्तेमाल करें: ब्राउज़र न समाने वाले रेडियस छोटे कर देता है, इसलिए सिरे पूरी तरह गोल रहते हैं।
› blob आकार कैसे बनते हैं?
blob आठ अलग-अलग प्रतिशत इस्तेमाल करते हैं: चार क्षैतिज और चार ऊर्ध्वाधर रेडियस, जैसे 30% 70% 70% 30% / 30% 30% 70% 70%। कोई blob प्रीसेट चुनें, दीर्घवृत्तीय कोने चालू करें और आकार बदलने के लिए हर कोने का स्लाइडर खिसकाएँ।