बॉर्डर रेडियस जनरेटर: लाइव पूर्वावलोकन के साथ गोल कोने

इसका इस्तेमाल कैसे करें

इकाई चुनें: स्थिर रेडियस के लिए px, या बॉक्स के आकार के साथ चलने वाले रेडियस के लिए %।
ऊपर बाएँ, ऊपर दाएँ, नीचे दाएँ और नीचे बाएँ के नीचे हर कोने का रेडियस लिखें। 0 वाला कोना चौकोर रहता है।
अगर कोना अपनी ऊँचाई से चौड़ा होना चाहिए तो दीर्घवृत्ताकार कोने (अलग ऊर्ध्वाधर रेडियस) पर निशान लगाएँ, और उसका ऊर्ध्वाधर रेडियस लिखें।
CSS की घोषणा कॉपी करें और अपने तत्व के नियम में चिपकाएँ।

चार कोने कैसे लिखे जाते हैं

border-radius प्रॉपर्टी एक से चार क्षैतिज रेडियस लेती है, इस क्रम में: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ और नीचे-बाएँ। कम मान वाली सूची अपने मानों को दोहराती है: दो मानों के साथ पहला ऊपर-बाएँ और नीचे-दाएँ कोनों के लिए है, और दूसरा ऊपर-दाएँ और नीचे-बाएँ के लिए। ऊर्ध्वाधर रेडियस स्लैश के बाद उसी क्रम में लिखा जाता है।

व्याकरण CSS Backgrounds and Borders specification में दिया है। हर रेडियस एक लंबाई या बॉक्स का प्रतिशत है, और शून्य रेडियस को इकाई की जरूरत नहीं होती।

border-radius: ऊपर-बाएँ ऊपर-दाएँ नीचे-दाएँ नीचे-बाएँ / ऊर्ध्वाधर ऊपर-बाएँ ऊर्ध्वाधर ऊपर-दाएँ ऊर्ध्वाधर नीचे-दाएँ ऊर्ध्वाधर नीचे-बाएँ

सबसे छोटा रूप

टूल हर वह मान छोड़ देता है जिसे शॉर्टहैंड वैसे भी दोहराता। अगर नीचे-बाएँ कोना ऊपर-दाएँ के बराबर है, तो वह नहीं लिखा जाता; अगर नीचे-दाएँ ऊपर-बाएँ के बराबर है, तो तीसरा मान भी चला जाता है। चार बराबर कोने एक मान बन जाते हैं, इसलिए 12px 12px 12px 12px को 12px लिखा जाता है।

स्लैश केवल तभी लिखा जाता है जब ऊर्ध्वाधर रेडियस अपने क्षैतिज रेडियस से अलग हो। दीर्घवृत्ताकार कोनों के बिना हर ऊर्ध्वाधर रेडियस अपने क्षैतिज रेडियस के बराबर होता है, इसलिए कोई स्लैश नहीं आता।

हल किया हुआ उदाहरण: दीर्घवृत्ताकार कोनों वाला कार्ड

ऊपर-बाएँ कोने को 40 px बाय 20 px, ऊपर-दाएँ को 20 px बाय 10 px, नीचे-दाएँ को 40 px बाय 20 px और नीचे-बाएँ को 20 px बाय 10 px रखें। क्षैतिज रेडियस 40, 20, 40, 20 हैं, जिन्हें शॉर्टहैंड 40px 20px लिखता है। ऊर्ध्वाधर रेडियस 20, 10, 20, 10 हैं, जिन्हें वह 20px 10px लिखता है।

घोषणा है border-radius: 40px 20px / 20px 10px;, और पूर्वावलोकन ऐसे कोने दिखाता है जो अपनी ऊँचाई से चौड़े हैं।

अक्सर पूछे जाने वाले सवाल

स्लैश से अलग दो सेट संख्याएँ क्यों होती हैं?

पहला सेट हर कोने का क्षैतिज रेडियस देता है, और स्लैश के बाद का सेट ऊर्ध्वाधर रेडियस। स्लैश के बिना कोना एक वृत्त-चाप होता है, जिसका रेडियस दोनों दिशाओं में एक जैसा है।

प्रतिशत वाला रेडियस क्या करता है?

प्रतिशत क्षैतिज रेडियस के लिए बॉक्स की चौड़ाई से और ऊर्ध्वाधर रेडियस के लिए उसकी ऊँचाई से लिया जाता है। हर कोने पर 50 प्रतिशत देने से चौकोर बॉक्स पर वृत्त बनता है, और गैर-चौकोर पर दीर्घवृत्त।

क्रम ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ क्यों है?

शॉर्टहैंड उसी घड़ी की दिशा वाले क्रम का पालन करता है जो बाकी बॉक्स प्रॉपर्टी इस्तेमाल करती हैं, ऊपर-बाएँ से शुरू करके। यह क्रम पता हो तो दो या तीन मानों वाले छोटे रूप आसानी से पढ़े जाते हैं।

क्या टूल रेडियस को बॉक्स के आकार से जाँचता है?

नहीं। टूल केवल यह जाँचता है कि हर रेडियस शून्य या उससे बड़ी संख्या है और 1000 px या 100 प्रतिशत की सीमा में है। अगर दो पड़ोसी रेडियस बॉक्स की भुजा से ज्यादा जुड़ते हैं, तो ब्राउज़र उन्हें छोटा कर देता है।

क्या मेरे लिखे गए मान किसी सर्वर पर सहेजे या भेजे जाते हैं?

नहीं। पूर्वावलोकन और CSS आपके ब्राउज़र में बनते हैं। कुछ भी हमारे सर्वर पर सहेजा या भेजा नहीं जाता, इसलिए पेज छोड़ने से पहले घोषणा कॉपी कर लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।