सीएसएस सीमा-त्रिज्या संपत्ति
उदाहरण
गोल कोनों को दो <div> तत्वों में जोड़ें:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
border-radius
गुण तत्व के कोनों की त्रिज्या को परिभाषित करता है ।
युक्ति: यह गुण आपको तत्वों में गोल कोनों को जोड़ने की अनुमति देता है!
इस गुण में एक से चार मान हो सकते हैं। यहाँ नियम हैं:
चार मान - बॉर्डर-त्रिज्या: 15px 50px 30px 5px; (पहला मान ऊपरी-बाएँ कोने पर लागू होता है, दूसरा मान ऊपरी-दाएँ कोने पर लागू होता है, तीसरा मान नीचे-दाएँ कोने पर लागू होता है, और चौथा मान नीचे-बाएँ कोने पर लागू होता है):
तीन मान - बॉर्डर-त्रिज्या: 15px 50px 30px; (पहला मान ऊपरी-बाएँ कोने पर लागू होता है, दूसरा मान ऊपरी-दाएँ और निचले-बाएँ कोने पर लागू होता है, और तीसरा मान नीचे-दाएँ कोने पर लागू होता है):
दो मान - सीमा-त्रिज्या: 15px 50px; (पहला मान ऊपर-बाएँ और नीचे-दाएँ कोने पर लागू होता है, और दूसरा मान ऊपर-दाएँ और नीचे-बाएँ कोने पर लागू होता है):
एक मान - सीमा-त्रिज्या: 15px; (मान सभी चार कोनों पर लागू होता है, जो समान रूप से गोल होते हैं:
डिफ़ॉल्ट मान: | 0 |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.borderRadius="25px" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट- या -मोज़ के बाद की संख्याएं- पहले संस्करण को निर्दिष्ट करें जो उपसर्ग के साथ काम करता है।
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
सीएसएस सिंटेक्स
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
नोट: प्रत्येक त्रिज्या के लिए चार मान ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ क्रम में दिए गए हैं। यदि नीचे-बाएं छोड़ा गया है तो यह शीर्ष-दाएं जैसा ही है। यदि नीचे-दाएं छोड़ा जाता है तो यह शीर्ष-बाएं जैसा ही होता है। यदि टॉप-राइट छोड़ा गया है तो यह टॉप-लेफ्ट के समान है।
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
पृष्ठभूमि रंग वाले तत्व के लिए गोलाकार कोनों को सेट करें:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
उदाहरण
बॉर्डर वाले तत्व के लिए गोल कोनों को सेट करें:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
उदाहरण
पृष्ठभूमि छवि वाले तत्व के लिए गोलाकार कोनों को सेट करें:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
उदाहरण
इस पर भी ध्यान दें:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
संबंधित पृष्ठ
CSS ट्यूटोरियल: CSS राउंडेड कॉर्नर
HTML DOM संदर्भ: BorderRadius गुण