- Introduction to CSS Border Property in Hindi
- CSS border-style
- CSS border-width
- CSS border-color
Introduction to CSS Border Property
CSS Border एक shorthand property है जिसका इस्तेमाल बॉर्डर को एलीमेंट पर सेट करने के लिए किया जाता है।
सीएसएस border properties style, रंग और एक तत्व की border के आकार निर्दिष्ट करने के लिए उपयोग कर रहे हैं। सीएसएस border properties नीचे दिए गए हैं
- border-style
- border-color
- border-width
- border-radius
1) CSS border-style
Border style property का उपयोग उस border प्रकार को निर्दिष्ट करने के लिए किया जाता है जिसे आप वेब पेज पर प्रदर्शित करना चाहते हैं।
कुछ border style values हैं जो एक सीमा को परिभाषित करने के लिए border-style property के साथ उपयोग किए जाते हैं।
| Value | विवरण |
|---|---|
| none | यह किसी भी border को परिभाषित नहीं करता है। |
| dotted | इसका उपयोग dotted border को परिभाषित करने के लिए किया जाता है। |
| dashed | इसका उपयोग dashed border को परिभाषित करने के लिए किया जाता है। |
| solid | इसका उपयोग solid border को परिभाषित करने के लिए किया जाता है। |
| double | यह दो बॉर्डर को परिभाषित करता है जो एक ही border-width value है। |
| groove | यह एक 3d grooved border को परिभाषित करता है। border-color value के अनुसार प्रभाव उत्पन्न होता है। |
| ridge | यह एक 3d ridged border को परिभाषित करता है। border-color value के अनुसार प्रभाव उत्पन्न होता है। |
| inset | यह एक 3d inset border को परिभाषित करता है। border-color value के अनुसार प्रभाव उत्पन्न होता है। |
| outset | यह एक 3d outset border को परिभाषित करता है। border-color value के अनुसार प्रभाव उत्पन्न होता है। |
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html> Output:
No border.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
A hidden border.
2) CSS border-width
border-width property का उपयोग बॉर्डर की चौड़ाई सेट करने के लिए किया जाता है। इसे पिक्सेल में सेट किया गया है। आप border की चौड़ाई निर्धारित करने के लिए तीन पूर्व-निर्धारित values में से एक, thin, medium या thick का उपयोग कर सकते हैं।
नोट: border-width property का अकेले उपयोग नहीं किया जाता है। इसे हमेशा बॉर्डर सेट करने के लिए “border-style” property जैसी अन्य border properties के साथ उपयोग किया जाता है अन्यथा यह काम नहीं करेगा।
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html> Output:
Write your text here.
Write your text here.
Write your text here.
3) CSS border-color
border का रंग निर्धारित करने के लिए तीन विधियाँ हैं।
- Name: यह रंग का नाम निर्दिष्ट करता है। उदाहरण के लिए: “red”।
- RGB: यह रंग का RGB मान निर्दिष्ट करता है। उदाहरण के लिए: “rgb(255,0,0)”
- Hex: यह रंग के Hex value को निर्दिष्ट करता है। उदाहरण के लिए: “#ff0000″।
“transparent” नामक एक border रंग भी है। यदि border का रंग सेट नहीं है, तो यह element की color property से inherited है।
नोट: border-color property का अकेले उपयोग नहीं किया जाता है। इसे हमेशा border सेट करने के लिए “border-style” property जैसी अन्य border properties के साथ उपयोग किया जाता है अन्यथा यह काम नहीं करेगा।
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html> Output:
This is a solid red border
This is a solid green border
