CSS Border Properties Tutorial | netbax

Html copy reset

Netbax Online Editor Try it Yourself

<style>
.solid {border-style: solid;color:#008000;}
.dotted {border-style: dotted;color:#ffbf00;}
.dashed {border-style: dashed;color:#ff7e00;}
.double {border-style: double;color:#c00;}
.groove {border-style: groove;color:#007FFF;}
.ridge {border-style: ridge;color:#ff3800;}
.inset {border-style: inset;color:#339;}
.outset {border-style: outset;color:#de5d83;}
.mixed {border-style: dotted solid dashed ridge;color:#964b00;}
.none {border-style: none;color:#873260;}
.hidden {border-style: hidden;color:#b5a642;}
.border-image {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(../../images/border1.PNG) 30 round;}
.border-image1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(../../images/border.png) 30 round;}
</style>
<p class="solid">solid</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="mixed">mixed</p>
<p class="none">None</p>
<p class="hidden">hidden</p>
<p class="border-image">border image for black page</p>
<p class="border-image1">border image for white page</p>