Introduction of CSS Border Property in Hindi
इस लेख में हम आपको CSS Border Property के बारे में detail में बतायेंगे।
CSS Border Property in Hindi
आप border का इस्तेमाल करके किसी भी elements को border दे सकते है और border property की मदद से border का style, width, color और radius change कर सकते है।
CSS border की अलग अलग property है। इसके name इस प्रकार से है।
- Border-style
- Border-width
- Border-color
- border-radius
border-style property
इस property का इस्तेमाल border के type को define करने के लिए होता है।
border-style property की value इस प्रकार से होती है।
- none – इसमे कोई border नहीं होती है।
- solid – इसमे सीधी line मे border होती है।
- dotted- इसमे ……….. ऐसे dotted border लगती है।
- dashed- इसमे —- ऐसे dashed border लगती है।
- double – इसमे double line मे border लगती है।
- groove – इसमे groove style मे border लगती है।
- ridge- इसमे ridge style मे border लगती है।
- inset- इसमे inset style मे border लगती है।
- outset – इसमे outset style मे border लगती है।
- mix – इसमे mix type की border दिखाई देती है।
उदाहरण
<!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.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>CSS Border Property in Hindi</h2>
<p class="none">No border example.</p>
<p class="dotted">A dotted border example.</p>
<p class="dashed">A dashed border example.</p>
<p class="solid">A solid border example.</p>
<p class="double">A double border example.</p>
<p class="groove">A groove border example.</p>
<p class="ridge">A ridge border example.</p>
<p class="inset">An inset border example.</p>
<p class="outset">An outset border example.</p>
<p class="mix">A mixed border example.</p>
</body>
</html>
आप border की चारो तरफ अलग अलग property का भी इस्तेमाल कर सकते है।
जैसे की
- border-top-style – इससे top border की style set की जाती है।
- border-bottom-style – इससे bottom border की style set की जाती है।
- border-left-style – इससे left border की style set की जाती है।
- border-right-style – इससे right border की style set की जाती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>CSS Border Property in Hindi</h2>
<p> different styles of border .</p>
</body>
</html>
border-width property
इस property की मदद से आप border की मोटाई को set कर सकते है।
border width को pt, px, cm, em आदि units मे भी set कर सकते है।
<!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: dotted;
border-width: 0.5em;
}
p.four {
border-style: dotted;
border-width: thick;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">Megatechbook</p>
<p class="two">Megatechbook</p>
<p class="three">Megatechbook</p>
<p class="four">Megatechbook</p>
</body>
</html>
आप border की चारो तरफ अलग अलग width property का भी इस्तेमाल कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">CSS Border Property in Hindi</p>
</body>
</html>
border-color Property
इस property की मदद से आप border का color set कर सकते है।
CSS border colors को आप color name, Hex code या RGB value से declare कर सकते हो।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #008000;
}
p.three {
border-style: dotted;
border-color: rgb(0,0,255);
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="one">solid red border</p>
<p class="two">solid green border</p>
<p class="three">dotted blue border</p>
</body>
</html>
आप border की चारो तरफ अलग अलग color property का भी इस्तेमाल कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red yellow blue green;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="one">CSS Border Property in Hindi</p>
</body>
</html>
border-radius property
इस property का इस्तेमाल करके आप border को rounded कर सकते है।
इसकी value px, percentage या pt units मे होती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
}
p.two {
border-style: solid;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="one">Normal border</p>
<p class="two">Round border</p>
</body>
</html>
Note: border-color, border-radius और border-width property तभी कम करेंगी जब आपने border-style property को पहले define किया होगा।
Shorthand Border Property
आप सभी border property को एक ही line मे define कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p> CSS Border Property in Hindi </p>
</body>
</html>
यहा border property को इस order मे लिखे।
- border-width
- border-style (यह property लिखना जरूरी है)
- border-color
Next : CSS Margins in Hindi