CSS border-style property
Style four borders:
{
border-style:solid;
}
Try it out . . .
More examples at the bottom of this page.
Description of property definition and use
The border-style property styles the four borders of an element. This property can have one to four values.
Instance:
border-style:dotted solid double dashed;
- The top border is dot-shaped
- The right box is solid
- The bottom border is a double line
- The left box is a dashed line
border-style:dotted solid double;
- The top border is dot-shaped
- The right and left boxes are solid lines
- The bottom border is a double line
border-style:dotted solid;
- The top and bottom borders are dot-shaped
- The right and left boxes are solid lines
border-style:dotted;
- All 4 borders are dot-shaped
| Default: | not specified |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object object.style.borderStyle="dotted double" |
Browser support
The numbers in the table support the first browser version number of the property.
| Attributes | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
The property value
| Value | Describe |
|---|---|
| none | Defines a borderless border. |
| hidden | Same as "none". Except when applied to tables, for tables, hidden is used to resolve border conflicts. |
| dotted | Define a dot border. Rendered solid in most browsers. |
| dashed | Define dotted lines. Rendered solid in most browsers. |
| solid | Define a solid line. |
| double | Define a two-line. The width of the double line is equal to the value of border-width. |
| groove | Define a 3D groove border. Its effect depends on the value of border-color. |
| ridge | Define a 3D ridged border. Its effect depends on the value of border-color. |
| inset | Define the 3D inset border. Its effect depends on the value of border-color. |
| outset | Define the 3D outset border. Its effect depends on the value of border-color. |
| inherit | Specifies that the border style should be inherited from the parent element. |
Online instance
Set a different border on each side
This example shows how to set different borders on each side of an element.
Related articles
CSS tutorial: CSS Border