CSS border-styleProperty
Example
Set the style of the four borders:
p
{
border-style:solid;
}
Try it Yourself »
More examples can be found at the bottom of this page.
Property definition and usage instructions
The border-style property sets the style of an element's four borders. This property can have from one to four values.
Example:
border-style:dotted solid double dashed;
- The top border is dotted.
- The right border is solid.
- The bottom border is double.
- The left border is dashed.
border-style:dotted solid double;
- The top border is dotted.
- The right and left borders are solid lines
- The bottom border is double.
border-style:dotted solid;
- The top and bottom borders are dotted
- The right and left borders are solid lines
border-style:dotted;
- All 4 borders are dotted
| Default Value: | not specified |
|---|---|
| Inherited: | no |
| version: | CSS1 |
| JavaScript Syntax: | object object.style.borderStyle="dotted double" |
Browser Support
The numbers in the table indicate the first browser version number that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property value
| Value | Description |
|---|---|
| none | Define no border. |
| hidden | Same as "none". However, except when applied to tables, for tables, hidden is used to resolve border conflicts. |
| dotted | Defines a dotted border. Rendered as a solid line in most browsers. |
| dashed | Defines a dashed border. Rendered as a solid line in most browsers. |
| solid | Define a solid line. |
| double | Defines a double border. The width of the double line equals the value of border-width. |
| groove | Defines a 3D grooved border. The effect depends on the value of border-color. |
| ridge | Defines a 3D ridged border. The effect depends on the value of border-color. |
| inset | Defines a 3D inset border. The effect depends on the border-color value. |
| outset | Defines a 3D outset border. The effect depends on the border-color value. |
| inherit | Specifies that the border style should be inherited from the parent element. |
Online Examples
Set different borders for each side
This example demonstrates how to set different borders on each side of an element.
Related Articles
CSS Tutorial:CSS Border
other extensions