CSS बॉर्डर रेडियस
आप बॉक्स के चारों ओर तीखा बॉर्डर खींच सकते हैं। अक्सर डिज़ाइन नरम कोने चाहता है — दोस्ताना कार्ड, आधुनिक बटन, अवतार जो गोले जैसे दिखें। यही border-radius है: हर कोना कितना घुमे।
border-radius क्या करता है?
border-radius तत्व के बॉर्डर बॉक्स के कोनों को गोल करता है। वक्र बॉर्डर रेखा और बैकग्राउंड पर लगता है (और आमतौर पर इमेज/overflow क्लिप भी)। बड़ा मान = गोलतर कोना। आम इकाई px या %।
एक मान — चारों कोने
रोज़ की शुरुआत: हर कोने के लिए एक लंबाई।
हर कोने पर समान रेडियस
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}क्या देखना चाहिए?
बॉर्डर वक्र का अनुसरण करता है और सफेद भराव गोल आकार के अंदर रहता है। रेडियस दूसरा बॉर्डर नहीं — वह मौजूदा बॉक्स को आकार देता है।
शॉर्टकट: कितने मान?
आप एक, दो, तीन या चार लंबाइयाँ दे सकते हैं। कोनों का क्रम तय है।
📊 border-radius मानों की संख्या
| मान | अर्थ | रोज़ाना नोट |
|---|---|---|
| 1 | चारों कोने एक जैसे | नरम कार्ड और पैनल |
| 2 | ऊपर-बाएँ + नीचे-दाएँ, फिर ऊपर-दाएँ + नीचे-बाएँ | विकर्ण जोड़ी |
| 3 | ऊपर-बाएँ, ऊपर-दाएँ + नीचे-बाएँ, नीचे-दाएँ | कम आम — अस्तित्व जानें |
| 4 | ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ | पूरा नियंत्रण, ऊपर-बाएँ से घड़ी की दिशा |
चार कोने, चार संख्याएँ
जब हर कोने का अपना वक्र हो, चार मान ऊपर-बाएँ से घड़ी की दिशा में लिखें।
चार अलग कोने
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}दो मान — विकर्ण जोड़े
दो लंबाइयाँ विपरीत कोनों को जोड़ती हैं: पहली ऊपर-बाएँ और नीचे-दाएँ; दूसरी ऊपर-दाएँ और नीचे-बाएँ।
दो-मान विकर्ण रेडियस
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}पिल बटन
बड़ा रेडियस (अक्सर ऊँचाई का आधा, या 999px जैसा बड़ा मान) आयत को कैप्सूल/पिल बनाता है — चिप्स और मुख्य क्रियाओं के लिए आम।
पिल आकार का बटन
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}गोलाकार अवतार
सच्चे गोले के लिए बॉक्स को बराबर चौड़ाई और ऊँचाई दें, फिर border-radius: 50%। गैर-वर्ग बॉक्स पर 50% दीर्घवृत्त बनाता है।
50 प्रतिशत रेडियस वाला गोल
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* गोले के अंदर फोटो काटता है */
}खुद आज़माएँ
- बॉर्डर वाले कार्ड को
border-radius: 12pxसे नरम करें। - चार अलग कोने रेडियस वाला बैज।
- टाइल पर दो-मान रेडियस लगाएँ और विकर्ण जोड़ी देखें।
border-radius: 999pxसे पिल बटन बनाएँ।- 64×64 अवतार
border-radius: 50%से — फिर चौड़े आयत पर50%आज़माकर तुलना करें।
आम गलतियाँ
- खाली, बिना बॉर्डर/रंग के बॉक्स पर विशाल रेडियस और हैरानी कि «कुछ नहीं दिखता»
- चौड़े आयत पर
50%और पूर्ण गोल की उम्मीद (दीर्घवृत्त मिलता है) - गोल चाहते हुए बराबर चौड़ाई/ऊँचाई भूलना
- सोचना कि
border-radiusborderकी जगह ले लेता है — वक्र साफ़ देखने के लिए बॉर्डर या भराव अभी भी चाहिए - कोनों का क्रम गड़बड़ करना (चार मान: ऊपर-बाएँ से घड़ी की दिशा)
सार
border-radiusबॉक्स के कोने गोल करता है- एक मान सब नरम करता है; चार मान हर कोना नियंत्रित करते हैं
- दो मान विपरीत कोनों को विकर्ण जोड़ते हैं
- बड़े रेडियस पिल बनाते हैं; वर्ग पर
50%गोल बनाता है - वक्र बॉर्डर और बैकग्राउंड को साथ काटता है
- कार्ड, पिल और अवतार तब तक अभ्यास करें जब तक आकार स्पष्ट लगें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी