Three border properties can be specified:

  • border-style
    • required, without it no other border properties will have any effect
  • border-color
  • border-width


Or, all three can be set using the shorthand keyword border on its own:



#myDiv { border: solid 1px red ;}

h1 { border: groove 1em #00F; }

.myClass { border: outset 2pt #ABCDEF}





Sets the border style of the element


Property Description
none no border. equivalent of border-width:0;
solid Single solid line
dotted Series of dots
dashed Series of dashes
double Two solid lines
groove 3D grooved border
ridge 3D ridged border
inset 3D inset border
outset 3D outset border
hidden Same as none, except for border conflict resolution for table elements



h1 { border-style: dotted ; }

p { border-style: solid ; }


Individual border edges can also be specified by defining the following properties:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style


h1 { border-bottom-style: dashed ; }

p { border-left-style: solid ; }





Sets the border color of the element, in hex, RGB or colour name.



h1 { border-color: #00F; }

p { border-color: rgb(63, 127, 255) ; }

.myClass { border-color: orange ; }





Sets the width of the border in px, pt or cm or it should be set to thin, medium or thick.



h1 { border-width: 5px ; }

p { border-width: medium ; }


Individual border widths can also be specified by defining the following properties:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width



Shorthand properties


Each of the border properties can be specified with one to four values. These examples are for border-style property, but they same principle applies to border-width and border-color:

  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

Leave a Reply