इस उपकरण के बारे में
बॉर्डर रेडियस जनरेटर ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ और नीचे-बाएँ क्रम में कोनों को नियंत्रित करता है। “चारों कोने जोड़ें” चालू होने पर किसी भी एक कोने का मान बदलने से बाकी तीन भी बदलते हैं। इससे सभी कोनों की गोलाई जल्दी एक जैसी कर सकते हैं।
कैसे इस्तेमाल करें
- गोलाई की इकाई चुनें और चारों कोनों के लिए शून्य या उससे अधिक मान दर्ज करें।
- समान गोलाई के लिए “चारों कोने जोड़ें” चालू करें।
- प्रीव्यू बॉक्स का बदलता आकार देखें।
- CSS कॉपी करें या सेटिंग रीसेट करके कोई दूसरा आकार बनाएँ।
उदाहरण
- 10, 20, 30 और 40px चार अलग-अलग कोनों की त्रिज्या बताते हैं।
- चारों कोने 20px हों तो आउटपुट border-radius: 20px होता है।
- ऊपर-बाएँ व नीचे-दाएँ 10px और ऊपर-दाएँ व नीचे-बाएँ 20px हों तो संक्षिप्त रूप 10px 20px है।
border-radius: 10px 20px 30px 40px;
border-radius: 20px;कार्यविधि और CSS विवरण
चार मानों वाला border-radius ऊपर-बाएँ कोने से शुरू होकर घड़ी की दिशा में चलता है। चारों मान समान हों तो एक मान पर्याप्त है; आमने-सामने के कोने समान हों तो दो मान पर्याप्त हैं। अन्य उपयुक्त संयोजन भी CSS के संक्षिप्त रूप में लिखे जा सकते हैं। बहुत बड़ी गोलाई को ब्राउज़र CSS नियमों के अनुसार उपयुक्त आकार तक घटाता है।
सामान्य उपयोग
- कार्ड और बटन के कोने एक समान गोल करना।
- अलग-अलग गोलाई वाले सजावटी कंटेनर बनाना।
- border-radius के मानों का क्रम और संक्षिप्त रूप के नियम समझना।
गोपनीयता
इनपुट की प्रोसेसिंग, गणना, CSS बनाना और प्रीव्यू, सब आपके ब्राउज़र में होता है। आपकी सामग्री अपलोड नहीं होती। किसी बैकएंड, डेटाबेस, ऑनलाइन API या तीसरे पक्ष के CDN का इस्तेमाल नहीं होता और आपका इनपुट अपने आप सेव नहीं होता।
FAQ
चारों कोनों का क्रम क्या है?
घड़ी की दिशा में क्रम है: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ।
“चारों कोने जोड़ें” क्या करता है?
इसे चालू करने पर किसी एक कोने का मान बदलने से वही मान बाकी तीन कोनों पर भी लागू होता है।
आउटपुट में कभी केवल एक या दो मान क्यों होते हैं?
समान कोनों के मान CSS के मानक संक्षिप्त रूप में लिखे जा सकते हैं। छोटा आउटपुट पूरे चार मानों जैसा ही आकार बनाता है।
बहुत बड़ी त्रिज्या अपने मान से छोटी क्यों दिखती है?
जब पास-पास के कोनों की त्रिज्याओं का जोड़ बॉक्स के आकार से अधिक हो, तो ब्राउज़र उन्हें एक ही अनुपात में घटाता है। इससे CSS नियमों के अनुसार कोने एक-दूसरे पर नहीं चढ़ते।