सीएसएस गोल

सीएसएस गोल

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 बाएँ निचले किनारे के बॉर्डर के आकार को निर्धारित करता है。