आप border-radiusसीएसएस के माध्यम से आवेदन करके किसी भी तत्व "गोल कोनों" दे सकते हैं । अगर रंग परिवर्तन शामिल है तो आप केवल नोटिस करेंगे। उदाहरण के लिए, यदि तत्व में पृष्ठभूमि-रंग या सीमा है, जो उस तत्व से भिन्न है, जो खत्म हो गया है। सरल उदाहरण:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )यह वास्तव में अब जरूरी नहीं है, लेकिन पूर्ण संभव ब्राउज़र समर्थन के लिए, आप इसके साथ उपसर्ग कर सकते हैं -webkit-और -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )उन गुणों के क्रम पर ध्यान दें: विक्रेता उपसर्गों को पहले सूचीबद्ध किया जाता है और गैर-उपसर्ग "कल्पना" संस्करण को अंतिम सूचीबद्ध किया जाता है। यह करने का सही तरीका है। सीमा त्रिज्या एक विशेष रूप से अच्छा उदाहरण है कि हम इसे इस तरह क्यों करते हैं। उपयोग करने के थोड़े अधिक जटिल संस्करण में border-radius(जहां आप एक के बजाय दो मान पास करते हैं) पुराने -webkit-विक्रेता उपसर्ग "कल्पना" संस्करण से पूरी तरह से अलग होगा। इसलिए यदि हम नेत्रहीन रूप से सभी तीन गुणों के लिए समान मान कॉपी / पेस्ट करते हैं, तो हम विभिन्न परिणाम क्रॉस-ब्राउज़र देख सकते हैं। इस परिदृश्य के बारे में अधिक जानें। सबसे अधिक निरंतरता दीर्घकालिक के लिए, "अंतिम" संस्करण को अंतिम रूप से सूचीबद्ध करना सबसे अच्छा है।
इन दिनों उपसर्गों को छोड़ने और सीमा-त्रिज्या का उपयोग करने के लिए इन दिनों बहुत यथार्थवादी है, जैसा कि यहां चर्चा की गई है।
यदि तत्व में एक छवि पृष्ठभूमि है, तो इसे प्राकृतिक रूप से गोल कोने में क्लिप किया जाएगा:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )कभी-कभी आप background-colorसीमा के बाहर "रिसाव" देख सकते हैं जब border-radiusमौजूद है। (ले देख)। इसे रोकने के लिए आप पृष्ठभूमि-क्लिप का उपयोग करें:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )केवल एक मूल्य के साथ, border-radiusएक तत्व के सभी चार कोनों पर समान होगा। लेकिन ऐसा नहीं होना चाहिए। आप चाहें तो प्रत्येक कोने को अलग से निर्दिष्ट कर सकते हैं:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )आप दो या तीन मान भी निर्दिष्ट कर सकते हैं। MDN इसे अच्छी तरह से समझाता है:
यदि एक मान सेट है, तो यह त्रिज्या सभी 4 कोनों पर लागू होता है ।
यदि दो मान सेट हैं, तो पहलाtop-left और bottom-rightकोने पर लागू होता है , दूसरा कोने top-rightऔर bottom-leftकोने पर लागू होता है ।
चार मूल्यों पर लागू होते हैं top-left, top-right, bottom-right, bottom-leftइसी क्रम में कोने।
तीन मान: दूसरा मान top-rightऔर भी लागू होता है bottom-left।
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )आप उन त्रिज्याओं को भी निर्दिष्ट कर सकते हैं जिनमें कोने गोल है। दूसरे शब्दों में, गोलाई को पूरी तरह से गोलाकार नहीं होना चाहिए, यह अण्डाकार हो सकता है। यह दो मूल्यों के बीच एक स्लैश ("/") का उपयोग करके किया जाता है।
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )नोट: फ़ायरफ़ॉक्स ने केवल 3.5+ और पुराने WebKit ब्राउज़रों (उदाहरण के लिए Safari 4) में अण्डाकार सीमाओं का समर्थन किया है जो गलत तरीके से "40px 10px" को "40px / 10px" के समान मानते हैं।
आप border-radiusप्रतिशत में मूल्य निर्दिष्ट कर सकते हैं । यह विशेष रूप से उपयोगी है जब एक सर्कल या एलीपस आकार बनाना चाहते हैं, लेकिन किसी भी समय उपयोग किया जा सकता है जब आप चाहते हैं कि सीमा त्रिज्या सीधे तत्वों की चौड़ाई के साथ सहसंबद्ध हो।
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )नोट: सीमा-त्रिज्या के लिए सफारी प्रतिशत मूल्यों में केवल 5.1+ में समर्थित है। ओपेरा में, केवल 11.5+ में समर्थित है।
विक्रेता प्रत्ययों के साथ यहां प्रत्येक व्यक्तिगत संपत्ति है:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )नोट: उन मूल्यों में से प्रत्येक में एक अंतरिक्ष-पृथक मान हो सकता है, जैसे "5px 10px", जो शॉर्टहैंड (क्षैतिज त्रिज्या (स्थान) ऊर्ध्वाधर त्रिज्या) में स्लैश-पृथक मान की तरह व्यवहार करता है।
साधन
- सीमा त्रिज्या कोड उत्पन्न करने के लिए त्वरित उपकरण
- मोज़िला डॉक्स
- पूर्ण त्रिज्या की खोज में
- क्या हमें अब सीमा-त्रिज्या को उपसर्ग करने की आवश्यकता है?
यहाँ विभिन्न गुणों और मूल्यों के साथ खेलने के लिए एक छोटी सी बात है:
CodePen पर क्रिस कॉयर (@chisciscoyier) द्वारा पेन ऑल द बॉर्डर-रेडियस देखें।
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 4 * | 3 * | ९ | १२ | 3.1 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | २.१ * | 3.2 * |