CSS Border Radius जेनरेटर
कोनों को आसानी से गोल करें। हर कोने के लिए अलग-अलग border-radius एडजस्ट करके ऑर्गेनिक आकार बनाएं।
आखिरी बार अपडेट किया गया: 2026-01-11
कॉर्नर कंट्रोल
लाइव प्रीव्यू
border-radius: 10px 10px 10px 10px;मुख्य विशेषताएं
- अलग-अलग कंट्रोल: टॉप-लेफ़्ट, टॉप-राइट, बॉटम-राइट, और बॉटम-लेफ़्ट कोनों को अलग-अलग एडजस्ट करें।
- लाइव प्रीव्यू: अपने शेप को रियल-टाइम में बदलते देखें।
- शॉर्टकोड जनरेशन: 4-वैल्यू CSS syntax अपने आप जेनरेट होता है।
- रीसेट बटन: तुरंत वर्गाकार शेप पर वापस जाएं।
इस Border Radius जेनरेटर का उपयोग कैसे करें
- बॉक्स के विशेष कोनों को गोल करने के लिए स्लाइडर खींचें।
- तेज़ वर्ग बनाने के लिए सभी स्लाइडर 0 पर सेट करें।
- परफ़ेक्ट सर्कल बनाने के लिए सभी स्लाइडर 100px पर सेट करें (मानते हुए बॉक्स 200px का है)।
- CSS कोड पाने के लिए कॉपी करें पर क्लिक करें।
Border Radius जेनरेटर का उपयोग क्यों करें?
4-वैल्यू syntax में कौन सी वैल्यू किस कोने के लिए है, यह याद रखना भ्रमित करने वाला हो सकता है। यह टूल बदलावों को तुरंत विज़ुअलाइज़ करता है, जिससे आप बिना मानसिक गणना किए जटिल ऑर्गेनिक आकार (जैसे पत्ते या ब्लॉब) बना सकते हैं।
सामान्य उपयोग
- डिज़ाइन सिस्टम में प्रोडक्ट कार्ड के कोनों को गोल करना।
- ब्लॉब-आकार की डेकोरेटिव बैकग्राउंड बनाना।
- वर्गाकार प्रोफ़ाइल फ़ोटो को गोल अवतार में बदलना।
- स्पीच-बबल शेप बनाना।
- न्यूमॉर्फिक कंपोनेंट के लिए हल्की गोलाई जोड़ना।
बेहतर परिणामों के लिए सुझाव
- रेडियस वैल्यू को एलिमेंट के आकार के अनुपात में रखें।
- एक सुसंगत डिज़ाइन सिस्टम के लिए, छोटे रेडियस स्केल का उपयोग करें।
- overflow: hidden के साथ border-radius मिलाकर चाइल्ड कंटेंट को क्लिप करें।
- अलग-अलग बॉक्स आकारों पर अपने शेप का परीक्षण करें।
अक्सर पूछे जाने वाले सवाल
4 वैल्यू का क्रम क्या है?
स्टैंडर्ड क्रम है: `Top-Left`, `Top-Right`, `Bottom-Right`, `Bottom-Left` (टॉप-लेफ़्ट से क्लॉकवाइज़)।
क्या मैं प्रतिशत वैल्यू उपयोग कर सकता हूं?
हां, CSS प्रतिशत सपोर्ट करता है (जैसे सर्कल बनाने के लिए `50%`)। यह जेनरेटर सटीकता के लिए पिक्सेल वैल्यू आउटपुट करता है, लेकिन आप कोड में मैन्युअल रूप से `px` को `%` में बदल सकते हैं।
मैं पिल शेप कैसे बनाऊं?
सभी कोनों पर बहुत ज़्यादा border-radius सेट करें (जैसे 999px)। ब्राउज़र इसे पिल इफ़ेक्ट के लिए अधिकतम संभव गोलाई पर सीमित कर देगा।
क्या यह इमेज पर काम करता है?
हां, `img` टैग में `border-radius` जोड़ने से उसके कोने गोल हो जाएंगे या वह सर्कल में क्लिप हो जाएगी।
रेडियस सेट करने पर भी एक कोना तेज़ (शार्प) क्यों दिखता है?
जांच लें कि बॉक्स रेडियस वैल्यू के लिए काफ़ी बड़ा है या नहीं — अगर दो सटे हुए कोनों की रेडियस साझा किनारे की लंबाई से ज़्यादा हो, तो ब्राउज़र सभी रेडियस को आनुपातिक रूप से घटा देता है, जिससे कोना अपेक्षा से ज़्यादा शार्प दिख सकता है।
क्या `border-radius` सभी ब्राउज़र में सपोर्टेड है?
हां, `border-radius` पिछले एक दशक से हर प्रमुख ब्राउज़र (Chrome, Firefox, Safari, Edge) में बिना प्रीफ़िक्स के सपोर्टेड है, इसलिए किसी वेंडर प्रीफ़िक्स या फ़ॉलबैक की ज़रूरत नहीं है।
क्या हर कोने के लिए दो अलग-अलग रेडियस से अंडाकार वक्र बनाया जा सकता है?
हां, CSS border-radius में स्लैश सिंटैक्स सपोर्ट होता है, जैसे `border-radius: 50px / 25px`, जहां स्लैश से पहले की वैल्यू क्षैतिज रेडियस और बाद की वैल्यू ऊर्ध्वाधर रेडियस सेट करती है।
क्या border-radius बैकग्राउंड कलर या बॉर्डर को भी प्रभावित करता है?
हां, यह पूरे बॉक्स को क्लिप करता है, जिसमें बैकग्राउंड कलर, बैकग्राउंड इमेज, बॉर्डर स्ट्रोक और box-shadow शामिल हैं।