सीएसएस गोल रेखांकन

सीएसएस गोल रेखांकन

CSS के माध्यम से border-radius गुण, किसी भी एलिमेंट के 'राउंड कॉर्नर' शैली को प्रदान कर सकता है。

CSS border-radius अट्रिब्यूट

CSS border-radius गुण एलिमेंट के कोन के दूरी को परिभाषित करता है。

सूचना:आप इस गुण को एलिमेंट को गोलाकार बनाने के लिए उपयोग कर सकते हैं!

यहाँ तीन उदाहरण हैं:

1. निर्धारित बैकग्राउंड रंग सहित एलिमेंट के गोलाकार:

गोलाकार!

2. बॉर्डर सहित एलिमेंट के गोलाकार:

गोलाकार!

3. बैकग्राउंड इमेज सहित एलिमेंट के गोलाकार:

गोलाकार!

यह कोड है:

उदाहरण

#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; 
}

अपने आप साबित करें

सूचना:border-radius गुण वास्तव में निम्नलिखित गुणों के लघु गुण है:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - प्रत्येक कोन निर्धारित करने के लिए

border-radius गुण एक से चार मान स्वीकार कर सकता है। नियम निम्नलिखित है:

चार मान - border-radius: 15px 50px 30px 5px;（अनुक्रम से क्रमश: ऊपरी डाहिनी, ऊपरी दाहिनी, दाहिनी नीचे, नीचे डाहिनी कोनों के लिए उपयोग किया जाता है）：

तीन मान - border-radius: 15px 50px 30px;（पहला मान ऊपरी डाहिनी कोन के लिए उपयोग किया जाता है, दूसरा मान ऊपरी दाहिनी और नीचे डाहिनी कोनों के लिए उपयोग किया जाता है, तीसरा मान दाहिनी नीचे कोन के लिए उपयोग किया जाता है）：

दो मान - border-radius: 15px 50px;（पहला मान ऊपरी डाहिनी और दाहिनी नीचे कोनों के लिए उपयोग किया जाता है, दूसरा मान ऊपरी दाहिनी और नीचे डाहिनी कोनों के लिए उपयोग किया जाता है）：

एक मान - border-radius: 15px;（यह मान सभी चार कोनों के लिए उपयोग किया जाता है और सभी गोलाकार एक से एक हैं）：

यह कोड है:

उदाहरण

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

अपने आप साबित करें

आप अभी भी अभिकर्ण को बना सकते हैं:

उदाहरण

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

अपने आप साबित करें

CSS गोलाकार गुण

गुण वर्णन
border-radius चार सभी border-*-*-radius गुणों के लिए लघु गुण निर्धारित करने के लिए उपयोग किया जाता है。
border-top-left-radius उपरी बाएं किनारे के बॉर्डर के रूप को निर्धारित करता है。
border-top-right-radius उपरी दाएं किनारे के बॉर्डर के रूप को निर्धारित करता है。
border-bottom-right-radius दाएं निचले किनारे के बॉर्डर के रूप को निर्धारित करता है。
border-bottom-left-radius बाएं निचले किनारे के बॉर्डर के रूप को निर्धारित करता है。