If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में border-style property का use करके हम किसी element का border define करते हैं , by default border की width 3px होती है।
p{
border-style : style_name;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border Example</title>
</head>
<body>
<p style="border-style:solid">CSS background Example</p>
</body>
</html>बैसे तो border-style property को border में ही color के साथ use कर लेते हैं , क्योंकि border-style में width को आप control नहीं कर सकते हैं। इसलिए मैं recommend करूंगा कि आप border के साथ ही , style को apply करें। border की सभी styles इस प्रकार हैं।
solid
dotted
dashed
double
groove
ridge
inset
outset
none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-style Example</title>
</head>
<body>
<p style="border-style:solid">solid</p>
<p style="border-style:dotted">dotted</p>
<p style="border-style:dashed ">dashed</p>
<p style="border-style:double">double</p>
<p style="border-style:groove">groove</p>
<p style="border-style:ridge">ridge</p>
<p style="border-style:inset">inset</p>
<p style="border-style:outset">outset</p>
<p style="border-style:hidden">hidden</p>
<p style="border-style:none">none</p>
</body>
</html>By default border-style किसी element के चारो तरफ same ही apply होती है , हालाँकि आप हर side के लिए अलग - अलग style apply कर सकते हैं।
{
border-style : top_style right_style bottom_style left_style;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS border-style Example</title>
<style>
#p1{
border-style:solid groove dotted dashed;
}
#p2{
border-style:double outset inset none;
}
</style>
</head>
<body>
<p id="p1">border-style example</p>
<p id="p2">border-style example</p>
</body>
</html>