border style

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS border-style Property

Example

Set the style of the four borders:

{
    border-style: solid;
}

Definition and Usage

The border-style property sets the style of an element's four borders. This property can have from one to four values.

Examples:

  • 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

CSS Syntax

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description  
none Default value. Specifies no border  
hidden The same as "none", except in border conflict resolution for table elements  
dotted Specifies a dotted border  
dashed Specifies a dashed border  
solid Specifies a solid border  
double Specifies a double border  
groove Specifies a 3D grooved border. The effect depends on the border-color value  
ridge Specifies a 3D ridged border. The effect depends on the border-color value  
inset Specifies a 3D inset border. The effect depends on the border-color value  
outset Specifies a 3D outset border. The effect depends on the border-color value

More Examples

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}