CSS Borders
Introduction to CSS Borders
किसी भी element की border उसे दूसरे elements से separate करती है। Borders को design करके आप webpage को और भी attractive बना सकते है। CSS आपको 4 properties provide करती है जिनकी मदद से आप borders की advanced designing कर सकते है। इनकी list निचे दी जा रही है।
- border-style
- border-width
- border-color
- border-radius
- border (shorthand)
इन सभी properties के बारे में निचे detail से दिया जा रहा है। आइये इन्हें समझने का प्रयास करते है।
border-style
इस property के द्वारा आप border की style define करते है। इस property की values predefined होती है जिनकी list निचे दी जा रही है। यदि आप इस property की value none देते है तो आपको border display नहीं होती है।
- none - इस value से element की border show नहीं होती है।
- solid - इस value के द्वारा आप एक solid border define कर सकते है।
- double - जब आप ये value देते है तो border double line की show होती है।
- dashed - जब आप ये value देते है तो border -(dash) से बनी हुई show होती है।
- dotted - इस value से आप border को dotted show कर सकते है।
- groove - इस value से border grooved दिखाई देती है।
- ridge - ये value यूज़ करके आप border को ridged बना सकते है।
- inset - इस value से आप inset border show कर सकते है।
- outset - इस value से आप outset border show कर सकते है।
border-style property को निचे उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-style demo</title>
<style>
div
{
border-style:double;
width:20%;
}
</style>
</head>
<body>
<div style>
<p> India is the best country in the world. I love my India</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में border की style को double define किया गया है। इससे Div के चारों तरफ double border show होगी। ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
border-width
यदि आप border की default width यूज़ नहीं करना चाहते है और उसे change करना चाहते है तो ऐसा आप border-width property के द्वारा कर सकते है। इस property के द्वारा आप अपने according border की width customize कर सकते है। इस property की value आप pixels में देते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-width</title>
<style>
#MyDiv{
border-style:solid;
border-width:10px;
width:20%;
}
</style>
</head>
<body>
<div id="MyDiv">
<p>Once upon a time there was crow. He was very thirsty. So he bought a water bottle and drank the water. And flew away.</p>
</div>
</body>
</html>
इस उदाहरण में border की width को 10px define किया गया है। इससे border की मोटाई 10px हो जाएगी। ये उदाहरण निचे दिया गया output generate करता है।
border-color
यदि आप पूरी border का color change करना चाहते है तो ऐसा आप border-color property यूज़ करके कर सकते है। इस property की value आप plain English में भी दे सकते है और hex में भी दे सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-color demo</title>
<style>
#MyDiv{
border-style:solid;
border-width:2px;
border-color:lime;
width:20%;
}
</style>
</head>
<body>
<div id="MyDiv">
<p>This is an example showing use of border color property in CSS</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में border का color lime define किया गया है। By default यह black रहता है। इससे border का color lime हो जायेगा।
border-radius
यदि आप किसी element की border के कोनों को curve देना चाहते है या shape देना चाहते है तो इसके लिए आप border-radius property इस्तेमाल कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसे निचे उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-radius</title>
<style>
#MyDiv{
border-style:solid;
border-width:2px;
border-color:blue;
border-radius:10px;
width:20%;
}
</style>
</head>
<body>
<div id="MyDiv">
<p>CSS is very powerful. We can design every element of a webpage using CSS. Borders are very important for designing a webpage.</p>
</div>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
border (shorthand)
यदि आप ऊपर दी गयी properties को एक single statement के द्वारा define करना चाहते है तो आप border (shorthand) property यूज़ कर सकते है। इस property के द्वारा आप ऊपर दी गयी सभी properties की value define कर सकते है। इस property का syntax निचे दिया जा रहा है।
border : <border-width> <border-style> <border-color>;
जैसा की आप ऊपर देख सकते है border property की values के रूप में सबसे पहले आप border-width की value देते है। इसके बाद आप border style define करते है और फिर उसके बाद border का color define किया जाता है। Border radius property को इसमें include नहीं किया गया है। इस property को निचे एक उदाहरण के माध्यम से समझाया गया है।
<html>
<head>
<title>border shorthand property demo</title>
<style>
#MyDiv{
border : 1px solid lime;
width:20%;
}
</style>
</head>
<body>
<div id="MyDiv">
<p>Border short hand property is a short version of all the properties defined above. But it does not include a value for border-radius property. </p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में सभी properties को एक single statement द्वारा define किया गया है। ये उदाहरण निचे दिया गया output generate करता है।
