CSS border-radius गुण

परिभाषा और उपयोग

border-radius गुण एक संक्षिप्त गुण है जो चार border-*-radius गुणों को सेट करने के लिए उपयोग किया जाता है。

सूचना:यह गुण आपको एलिमेंट के लिए गोलाकार बॉर्डर जोड़ने की अनुमति देता है!

दूसरे देखें:

CSS3 शिक्षा:CSS3 किनारा

उदाहरण

डिव एलिमेंट को गोलाकार बॉर्डर जोड़ें:

div
{
border:2px solid;
border-radius:25px;
}

स्वयं को प्रयोग करें

पृष्ठ के नीचे और अधिक उदाहरण हैं。

CSS व्याकरण

border-radius: 1-4 length|% / 1-4 length|%;

टिप्पणी:इस क्रम में प्रत्येक रेडियस के चार मूल्यों को सेट करें। अगर bottom-left को छोड़ दिया जाता है, तो यह top-right के समान होगा। अगर bottom-right को छोड़ दिया जाता है, तो यह top-left के समान होगा। अगर top-right को छोड़ दिया जाता है, तो यह top-left के समान होगा।

गुण मूल्य

मूल्य वर्णन टेस्ट
length गोलाकार कोन के आकार को परिभाषित करें。 टेस्ट
% प्रतिशत के द्वारा गोलाकार कोन के आकार को परिभाषित करें。 टेस्ट

उदाहरण 1

border-radius:2em;

इकवालेंट है:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

उदाहरण 2

border-radius: 2em 1em 4em / 0.5em 3em;

इकवालेंट है:

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;

तकनीकी विवरण

डिफ़ॉल्ट मूल्य: 0
विरासत की विशेषता: नहीं
संस्करण: CSS3
JavaScript व्याकरण: object.style.borderRadius="5px"

ब्राउज़र समर्थन

टेबल में दिए गए नंबरों में इस अभियात्मकता का पहला समर्थन करने वाला ब्राउज़र का संस्करण उल्लेख किया गया है。

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5