- Introduction to CSS border-radius property in Hindi
- Property values
Introduction to CSS border-radius property
यह CSS property गोल borders को निर्धारित करती है और एक तत्व, टैग या div के चारों ओर गोल कोनों को प्रदान करती है। यह एक तत्व के कोनों की त्रिज्या (radius ) को परिभाषित करता है।
यह border top-left-radius, border-top-right-radius, border-bottom-right-radius और border-bottom-left-radius के लिए shorthand है । यह एक तत्व की सीमा के कोनों को गोल आकार देता है। हम बॉर्डर के सभी चार कोनों को border-radius का उपयोग करके एक ही declaration में निर्दिष्ट कर सकते हैं। इस property के मूल्यों को प्रतिशत या लंबाई इकाइयों में परिभाषित किया जा सकता है।
इस सीएसएस property में वे गुण शामिल हैं जो निम्नानुसार सारणीबद्ध हैं:
| Property | Description |
|---|---|
| border-top-left-radius | इसका उपयोग शीर्ष-बाएं कोने के लिए border-radius सेट करने के लिए किया जाता है |
| border-top-right-radius | इसका उपयोग शीर्ष-दाएं कोने के लिए border-radius सेट करने के लिए किया जाता है |
| border-bottom-right-radius | इसका उपयोग नीचे-दाएं कोने के लिए border-radius सेट करने के लिए किया जाता है |
| border-bottom-left-radius | इसका उपयोग नीचे-बाएं कोने के लिए border-radius सेट करने के लिए किया जाता है |
यदि नीचे-बाएँ मान छोड़ा गया है, तो यह शीर्ष-दाएँ के समान होगा। यदि नीचे-दाएं का मूल्य समाप्त हो जाता है, तो यह शीर्ष-बाएं के समान होगा। इसी तरह, अगर टॉप-राइट को खत्म कर दिया जाता है, तो यह टॉप-लेफ्ट की तरह ही होगा।
आइए देखें कि क्या होता है जब हम इस संपत्ति को एक मान, दो मान, तीन मान और चार मान प्रदान करते हैं।
- यदि हम इस property को एक मान ( जैसे कि सीमा-त्रिज्या: 30px;) प्रदान करते हैं, तो यह सभी कोनों को एक ही मूल्य पर सेट करेगा।
- जब हम दो मान निर्दिष्ट करते हैं ( जैसे कि सीमा-त्रिज्या: 20% 10%;) , तब पहला मान शीर्ष-बाएँ और नीचे-दाएँ कोने के लिए उपयोग किया जाएगा, और दूसरा मान शीर्ष-दाएँ और बाएँ के लिए उपयोग किया जाएगा नीचे-बाएँ कोने।
- जब हम तीन मूल्यों ( जैसे कि सीमा-त्रिज्या: 10% 30% 20%;) का उपयोग करते हैं, तो पहला मूल्य शीर्ष-बाएँ कोने के लिए उपयोग किया जाएगा, दूसरा मूल्य शीर्ष-दाएं और नीचे-बाएँ कोने पर लागू किया जाएगा और तीसरा मान नीचे-दाएं कोने पर लागू किया जाएगा।
- इसी तरह, जब इस संपत्ति के चार मूल्य होते हैं (सीमा-त्रिज्या: 10% 30% 20% 40%;) तब पहला मान शीर्ष-बाएँ का त्रिज्या होगा, दूसरा मान शीर्ष-दाएं के लिए उपयोग किया जाएगा, तीसरा मूल्य नीचे-दाएं पर लागू किया जाएगा, और चौथा मूल्य नीचे-बाएं के लिए उपयोग किया जाता है।
Syntax
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial; Property values
लंबाई: यह कोनों के आकार को परिभाषित करता है। यह लंबाई के मानों का उपयोग करके त्रिज्या के आकार को दर्शाता है। इसका डिफ़ॉल्ट मान 0. है। यह negative मानों की अनुमति नहीं देता है।
प्रतिशत: यह त्रिज्या के आकार को प्रतिशत में दर्शाता है। यह भी negative मूल्यों को अनुमति नहीं देता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}
p{
font-size: 25px;
}
#one {
border-radius: 90px;
background: lightgreen;
}
#two {
border-radius: 25% 10%;
background: orange;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}
</style>
</head>
<body>
<div id = "one">
<h2> Welcome to the hinditutorialspoint.com </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Welcome to the hinditutorialspoint.com </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the hinditutorialspoint.com </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the hinditutorialspoint.com</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
Output:
अब, विशिष्ट कोनों के लिए border-radius देखते हैं ।
Example- border-top-left-radius
यह शीर्ष-बाएं कोने के लिए border radius सेट करता है।
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
#left {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html> उत्पादन
Welcome
border-top-left-radius: 250px;
