Developer Toolsबॉर्डर रेडियस जनरेटर
स्वतंत्र कोने नियंत्रण के साथ जटिल CSS border-radius आकार विज़ुअली बनाएं। लाइव प्रीव्यू देखें और तुरंत उपयोग के लिए तैयार CSS कोड कॉपी करें।
कोने की सेटिंग
यूनिट:
प्रीव्यू और CSS कोड
border-radius: 8px
शॉर्टहैंड
.element {
border-radius: 8px;
}लॉन्गहैंड
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}संबंधित टूल्स
बॉर्डर रेडियस जनरेटर के बारे में
यह कैसे काम करता है
- स्लाइडर या नंबर इनपुट से हर कोने को एडजस्ट करें
- सभी चार कोनों को एक साथ नियंत्रित करने के लिए 'सभी कोनों को लिंक करें' चालू करें
- फिक्स्ड या रिलेटिव साइज़ के अनुसार यूनिट (px या %) चुनें
- सर्कल, पिल या स्क्वेयर जैसे सामान्य आकार के लिए प्रीसेट का उपयोग करें
- रियलिस्टिक व्यू के लिए प्रीव्यू बैकग्राउंड और एलिमेंट कलर कस्टमाइज़ करें
- एक क्लिक में जेनरेट किया गया CSS शॉर्टहैंड या लॉन्गहैंड कोड कॉपी करें
सामान्य उपयोग के मामले
- गोल कोनों वाले बटन, कार्ड और इनपुट फ़ील्ड डिज़ाइन करना
- UI डिज़ाइन में पिल-शेप टैग और बैज बनाना
- 50% border-radius से सर्कुलर अवतार और आइकॉन बनाना
- क्रिएटिव लेआउट के लिए अनोखे असमान आकार बनाना
- सटीक कोने नियंत्रण के साथ UI कॉम्पोनेंट प्रोटोटाइप करना
- CSS border-radius मानों को सीखना और प्रयोग करना
अक्सर पूछे जाने वाले प्रश्न
CSS border-radius क्या है?
CSS border-radius एक प्रॉपर्टी है जो किसी एलिमेंट के बॉर्डर बॉक्स के कोनों को गोल करती है। यह एक से चार वैल्यू स्वीकार करती है जो ऊपर-बाएं, ऊपर-दाएं, नीचे-दाएं और नीचे-बाएं कोनों की त्रिज्या परिभाषित करती है।
बॉर्डर रेडियस जनरेटर का उपयोग कैसे करें?
हर कोने को स्वतंत्र रूप से एडजस्ट करने के लिए स्लाइडर या नंबर इनपुट का उपयोग करें। लाइव प्रीव्यू तुरंत अपडेट होता है, और आप एक क्लिक में जेनरेट किया गया CSS कोड कॉपी कर सकते हैं।
क्या मैं हर कोने के लिए अलग वैल्यू सेट कर सकता हूं?
हां। असमान आकार के लिए 'सभी कोनों को लिंक करें' विकल्प बंद करें और हर कोने (ऊपर-बाएं, ऊपर-दाएं, नीचे-दाएं, नीचे-बाएं) को स्वतंत्र रूप से नियंत्रित करें।
CSS शॉर्टहैंड और लॉन्गहैंड में क्या अंतर है?
शॉर्टहैंड प्रॉपर्टी border-radius एक बार में सभी चारों कोने सेट करती है। लॉन्गहैंड प्रॉपर्टीज़ (border-top-left-radius आदि) हर कोने को अलग सेट करती हैं।
CSS border-radius से वृत्त कैसे बनाएं?
किसी वर्गाकार एलिमेंट पर border-radius को 50% सेट करें। इसे तुरंत लागू करने के लिए इस टूल में 'सर्कल' प्रीसेट का उपयोग करें।
पिल/कैप्सूल शेप कैसे बनाएं?
पिल शेप बनाने के लिए border-radius को बहुत बड़ी वैल्यू (जैसे 9999px) पर सेट करें। एक क्लिक में लागू करने के लिए 'पिल' प्रीसेट का उपयोग करें।
क्या border-radius प्रतिशत मान सपोर्ट करता है?
हां। प्रतिशत मान एलिमेंट के आयामों के सापेक्ष होते हैं: किसी वर्गाकार एलिमेंट पर 50% एक वृत्ताकार आकार बनाता है। यह टूल px और % दोनों यूनिट सपोर्ट करता है।
border-radius शॉर्टहैंड में दो वैल्यू का मतलब क्या है?
दो वैल्यू होने पर पहली वैल्यू ऊपर-बाएं और नीचे-दाएं कोनों पर, और दूसरी वैल्यू ऊपर-दाएं और नीचे-बाएं कोनों पर लागू होती है।
क्या जेनरेट किया गया CSS सभी ब्राउज़रों के साथ कॉम्पेटिबल है?
हां। border-radius प्रॉपर्टी सभी आधुनिक ब्राउज़रों और Internet Explorer 9+ में सपोर्टेड है।
क्या मैं बैकग्राउंड कलर के साथ शेप प्रीव्यू कर सकता हूं?
हां। लाइव प्रीव्यू में कस्टमाइज़ेबल बैकग्राउंड कलर के साथ शेप दिखाई देता है।
डिफ़ॉल्ट वैल्यू पर कैसे रीसेट करें?
'रीसेट' बटन क्लिक करें और सभी कोने 8px पर वापस आ जाएंगे।
कौन से प्रीसेट उपलब्ध हैं?
इस टूल में सामान्य आकारों के प्रीसेट हैं: स्क्वेयर (0px), स्लाइट (4px), राउंडेड (8px), एक्स्ट्रा राउंडेड (16px), पिल (9999px), और सर्कल (50%)।