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>
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
