CSS Border Property in Hindi

  • Introduction to CSS Border Property in Hindi
    • CSS border-style
    • CSS border-width
    • CSS border-color
CSS Border Property in Hindi

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.

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

Leave a Reply

DMCA.com Protection Status