Css Border Style Examples - Css
What are all the different border styles in CSS?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This border style property allows you to set different styles for the all four borders. The border style code in css is given below.
<style>
div{
text-align:center; width:100px;height:20px;padding:20px;border-color:red;
}
.none {border-style: none;}
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.hidden {border-style: hidden;}
</style>
<div class="none">No border.</div></br>
<div class="dotted">Dotted border.</div></br>
<div class="dashed">Dashed border.</div></br>
<div class="solid">Solid border.</div></br>
<div class="double">Double border.</div></br>
<div class="groove">Groove border.</div></br>
<div class="ridge">Ridge border.</div></br>
<div class="inset">Inset border.</div></br>
<div class="outset">Outset border.</div></br>
<div class="hidden">Hidden border.</div></br>
