The CSS border style Properties allow you to specify the border area of an element’s box. CSS border-style property. It defines what brand of the border to display. Styling anything assigns to adding that extra touch that performs the final result stands out. It is needed that consideration must be paid to the lighter details simultaneously with the major ones. The cascading style sheet increases the same ideology. Not only does it focus on the major style changes, but the lighter ones as well. This article will discuss the CSS property, through which we can give a border to any presented element. We use the CSS property border style for defining the line style on all four sides of an element as its border.
Read Also: How to use CSS Padding
CSS Border Style
Border style property is used for explaining all the four (or lesser) borders for any given element. The syntax used for this property is as follows:
border-style: solid|double| dotted| groove| dashed| none; border-left:20px; border-right:30px; border-bottom:40px; border-top:50px;
The border shorthand CSS property sets an element’s border. It sets the values of border width, border style, and border color.
Read Also: How to use Margin In CSS
CSS Border Style Properties.
- Solid
- Dashed
- Dotted
- Outset
- Double
- Groove
- None
- Inset
CSS Solid Border.
<h2>The border-style Property</h2>
<p class="solid">A solid border.</p>
<style type="text/css">
.solid{border:5px solid #000;padding: 5px;}
</style>CSS Groove Border.
<h2>The border-style Property</h2>
<p class="groove">A groove border.</p>
<style type="text/css">
.groove{border:5px groove #000;padding: 5px;}
</style>CSS Double Border:
<h2>The border-style Property</h2>
<p class="double">A double border.</p>
<style type="text/css">
.double{border:5px double #000;padding: 5px;}
</style>CSS Dooted Border.
<h2>The border-style Property</h2>
<p class="dotted">A dotted border.</p>
<style type="text/css">
.dotted{border:5px dotted #000;padding: 5px;}
</style>CSS None Border.
<h2>The border-style Property</h2>
<p class="none">No border.</p>
<style type="text/css">
.none{border:5px none #000;padding: 5px;}
</style>CSS Inset Border.
<h2>The border-style Property</h2>
<p class="inset">An inset border.</p>
<style type="text/css">
.inset{border:5px inset #000;padding: 5px;}
</styleCSS Outset Border
<h2>The border-style Property</h2>
<p class="outset">An outset border.</p>
<style type="text/css">
.outset{border:5px outset #000;padding: 5px;}
</style>CSS Dashed Border
<h2>The border-style Property</h2>
<p class="dashed">A dashed border.</p>
<style type="text/css">
.dashed{border:5px dashed #000;padding: 5px;}
</style>