Border Property का उपयोग Element के Border को अलग-अलग रूपों और अनुभव में प्रदर्शित करने के लिए किया जाता है. आप अलग-अलग Borders Styles के साथ Web Page को और Attractive बना सकते है. इसका उपयोग Web Page पर प्रदर्शित करने के लिए Element या Tag का Circle देने के लिए किया जाता है.
हम Border को Specify करने के लिए सबसे अधिक दो Attributes Border Style और Border Width का उपयोग करते है. CSS आपको चार Properties Provide करती है. जिनकी मदद से आप Borders की Advanced Designing कर सकते है. इनकी List आप नीचे देख सकते है.
border-color
border-style
border-width
इस Property का उपयोग Border के Color को निर्धारित करने के लिए किया जाता है. Color Color Name, Hex Value या RGB Value का उपयोग करके सेट किया जा सकता है. यदि Color Specified Border नहीं है तो Element का Color Inherits में मिला है
अगर आप पूरे Border के Color को बदलना चाहते है तो आप Border Color Property का उपयोग करके इसे बदल सकते हो.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#00FFFF;
border-top-color:#0000FF;
border-left-color:#A52A2A;
border-right-color:#7FFF00;
}
p.example2{
border:1px solid;
border-color:#006400;
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in different color only.
</p>
</body>
</html>
Border Style Property का उपयोग ज्यादातर Border Style को Specify करने और विभिन्न Styles मे Borders को Set करने के लिए और विकल्प प्रदान करने के लिए किया जाता है. जैसे की Dotted, Dashed, Solid आदि. यह Property Element के Borders को Different Look देने मे बहुत उपयोगी है. इस Property से आप Border style को Define करते है.
| Value | Description |
|---|---|
| none | None Value से Element का Border नही दिखाई देता है. |
| solid | Solid Value से आप एक Solid Border को Define कर सकते हो. |
| double | जब आप Double Value देते है तो Border Double Line Show होती है. |
| dashed | Dashed Value से Border - Dash से बनी हुई Show होती है. |
| dotted | Dotted Value से आप Border को Dotted Show कर सकते है. |
| groove | Groove Value से Border Grooved दिखाई देता है. |
| ridge | Ridge Value का उपयोग करके आप Border को Ridged बना सकते हो. |
| inset | Inset Value से आप Inset Border Show कर सकते हो. |
| outset | Outset Value से आप Outset Border को Show कर सकते हो. |
<!DOCTYPE HTML>
<html>
<head>
<title>Border Style Property Example</title>
<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>
Border की Width Border की Width निर्धारित करती है. Border की Width px, pt, cm या Medium और Thick में हो सकती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Border Width Property Example</title>
<style>
p.one {
border-style: solid;
border-width: 4px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class="one">My Name is Ammu.</p>
<p class="two">My Name is Ammu.</p>
<p class="three">My Name is Ammu.</p>
</body>
</html>