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>


Ask Questions

Ask Question