CSS border-style property
Examples
Set up four border style:
p
{
border-style:solid;
}
{
border-style:solid;
}
Bottom of the page to see more examples.
Attribute definitions and instructions
border-style property set four borders of an element of style. This property can have one to four values.
Example:
border-style: dotted solid double dashed ;
- The borders are dotted
- Right border is a solid line
- A double bottom border
- Left border is a dotted line
border-style: dotted solid double;
- The borders are dotted
- Right border and left border is a solid line
- A double bottom border
border-style: dotted solid;
- Upper and bottom borders are dotted
- Right border and left border is a solid line
border-style: dotted;
- All four borders are dotted
Defaults: | not specified |
---|---|
inherit: | no |
version: | CSS1 |
JavaScript syntax: | object object.style.borderStyle = "dotted double" |
Browser Support
Figures in the table represent the first browser to support the version number of the property.
属性 | |||||
---|---|---|---|---|---|
border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property Value
value | description |
---|---|
none | No defined borders. |
hidden | And "none" the same. However, when applied to the table except for the table, hidden for solving the border conflict. |
dotted | Defined dot border. Rendered as a solid line in most browsers. |
dashed | The definition of a dotted line. Rendered as a solid line in most browsers. |
solid | The definition of a solid line. |
double | The definition of wire. Double width equal to the value of border-width. |
groove | 3D recess defined border. The effect depends on the border-color value. |
ridge | 3D corrugated defined border. The effect depends on the border-color value. |
inset | Define 3D inset border. The effect depends on the border-color value. |
outset | Define 3D outset border. The effect depends on the border-color value. |
inherit | Provisions should inherit the border style from the parent element. |
Online examples
Set different borders on each side
This example demonstrates how to set different borders on each side of the element.
related articles
CSS tutorial: CSS Border