THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS border-style Property


Example

Set the style of the four borders:

p {
    border-style: solid;
}

Try it yourself »

More "Try it Yourself" examples below.


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
Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderStyle="dotted double" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-style 1.0 4.0 1.0 1.0 3.5

Note: The value "hidden" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support "hidden".


CSS Syntax

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

Property Values

Value Description Play it
none Default value. Specifies no border Play it »
hidden The same as "none", except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Examples

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;}

Try it yourself »

Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderStyle property



COLOR PICKER

colorpicker

SHARE THIS PAGE






Search w3schools.com:

Translate w3schools.com: