Border Radius Generator
CSS border-radius बनाएं
border-radius: 8px;
इस टूल के बारे में
border-radius प्रॉपर्टी किसी एलिमेंट के कोनों को गोल बनाती है। जब चारों मान समान हों, तो एकल मान शॉर्टहैंड का उपयोग किया जाता है। अलग-अलग मान असममित आकार बनाते हैं — गोली सभी कोनों पर 50% उपयोग करती है, पत्ती 0% और 50% बारी-बारी से उपयोग करती है।
सीधे मान टाइप करने के लिए किसी कोने की संख्या पर क्लिक करें, या सभी चार कोनों को एक साथ बदलने के लिए लिंक्ड स्लाइडर खींचें। प्रत्येक कोने को स्वतंत्र रूप से नियंत्रित करने के लिए सभी कोने लॉक करें बंद करें।
कैसे उपयोग करें
- चार कोने इनपुट (ऊपर-बाएं, ऊपर-दाएं, नीचे-बाएं, नीचे-दाएं) में मान दर्ज करें।
- स्लाइडर से एक साथ चारों मान सेट करने के लिए सभी कोने लॉक करें सक्षम करें।
- डिज़ाइन ज़रूरतों के अनुसार px और % इकाइयों के बीच स्विच करें।
- पूर्वनिर्धारित आकार तुरंत लागू करने के लिए प्रीसेट (गोली, पत्ती, ब्लॉब आदि) पर क्लिक करें।
उपयोग के मामले
UI डिज़ाइनर बटन, कार्ड और अवतार आकार बनाने के लिए border-radius का उपयोग करते हैं। डेवलपर ब्रांड डिज़ाइन सिस्टम से मेल खाने के लिए गोल कोनों को फाइन-ट्यून करते हैं। गोली आकार (50%) टैग और बैज के लिए आमतौर पर उपयोग किया जाता है। असममित मान सजावटी तत्वों के लिए जैविक पत्ती या ब्लॉब आकार बनाते हैं।
अक्सर पूछे जाने वाले प्रश्न
- px और % में क्या अंतर है? — px एलिमेंट के आकार की परवाह किए बिना एक स्थिर कोने त्रिज्या देता है। % एलिमेंट की चौड़ाई और ऊंचाई के सापेक्ष होता है — सभी कोनों पर 50% एक सही वृत्त बनाता है (यदि एलिमेंट वर्गाकार है)।
- क्या मैं प्रत्येक कोने के लिए अलग त्रिज्या सेट कर सकता हूं? — हां। सभी कोने लॉक करें अनचेक करें और प्रत्येक कोने के इनपुट में अलग मान टाइप करें।
- शॉर्टहैंड आउटपुट का क्या मतलब है? — जब चारों कोने समान हों, आउटपुट एकल मान होता है। जब अलग हों, CSS क्रम है: ऊपर-बाएं, ऊपर-दाएं, नीचे-दाएं, नीचे-बाएं।