CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS border-style Property
Example
Set the style of the four borders:
p
{
border-style:solid;
}
{
border-style:solid;
}
Try it yourself »
More examples at the bottom of this page.
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: | not specified |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object.style.borderStyle="dotted double" |
Browser Support
The border-style property is supported in all major browsers.
Note: No versions of Internet Explorer (including IE8) support the property values "inherit" or "hidden".
Property Values
| Value | Description | Play it |
|---|---|---|
| none | 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 » |
| inherit | Specifies that the border style should be inherited from the parent element |
Try it Yourself - Examples
Set different borders on
each side
How to set different borders on each side of an
element.
Related Pages
CSS tutorial: CSS Border
HTML DOM reference: borderStyle property
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
