CSS Border Style Properties | netbax

Html copy reset

Netbax Online Editor Try it Yourself

<style>
.demo1{border-width:4px;
border-style:solid;
border-color:#c00;
color:#000;}
.demo2{border-width:4px;
border-style:dotted;
border-color:#c00;
color:#000;}
.demo3{border-width:4px;
border-style:dashed;
border-color:#c00;
color:#000;}
.demo4{border-width:4px;
border-style:double;
border-color:#c00;
color:#000;}
.demo5{border-width:4px;
border-style:groove;
border-color:#c00;
color:#000;}
.demo6{border-width:4px;
border-style:inset;
border-color:#c00;
color:#000;}
.demo7{border-width:4px;
border-style:outset;
border-color:#c00;
color:#000;}
.demo8{border-width:4px;
border-style:ridge;
border-color:#c00;
color:#000;}
.demo9{border-width:4px;
border-style:none;
border-color:#c00;
color:#000;}
</style>
<p class="demo1">border-style:solid</p><br>
<p class="demo2">border-style:dotted</p><br>
<p class="demo3">border-style:dashed</p><br>
<p class="demo4">border-style:double</p><br>
<p class="demo5">border-style:groove</p><br>
<p class="demo6">border-style:inset</p><br>
<p class="demo7">border-style:outset</p><br>
<p class="demo8">border-style:ridge</p><br>
<p class="demo9">border-style:none</p>