Borders

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:

 

Example:

#myDiv { border: solid 1px red ;}

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

.myClass { border: outset 2pt #ABCDEF}

 

 

border-style

 

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

 

Examples:

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

Examples:

h1 { border-bottom-style: dashed ; }

p { border-left-style: solid ; }

 

 

border-color

 

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

 

Examples:

h1 { border-color: #00F; }

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

.myClass { border-color: orange ; }

 

 

border-width

 

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

 

Examples:

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