Style borderStyle property
- Forrige side borderSpacing
- Næste side borderTop
- Gå tilbage til forrige niveau HTML DOM Style object
Definition and usage
borderStyle
Property sets or returns the style of the element border.
This property can take one to four values:
- One value, for example: p {border-style: solid} - All four borders are solid
- Two values, for example: p {border-style: solid dotted} - The top and bottom borders are solid, and the left and right borders are dashed
- Three values, for example: p {border-style: solid dotted double} - The top border is solid, the left and right borders are dotted, and the bottom border is double
- Four values, for example: p {border-style: solid dotted double dashed} - The top border is solid, the right border is dashed, the bottom border is double, and the left border is dashed
See also:
CSS tutorial:CSS kant
CSS reference manual:border-style property
HTML DOM reference manual:border 属性
border property
Instance
Example 1
Adds a solid border to the <div> element:
document.getElementById("myDiv").style.borderStyle = listValue;
document.getElementById("myDiv").style.borderStyle = "solid";
Example 2
Changes the style of the four borders of the <div> element:
document.getElementById("myDiv").style.borderStyle = listValue;
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Example 3
Returns the border style of the <div> element:
document.getElementById("myDiv").style.borderStyle = listValue;
alert(document.getElementById("myDiv").style.borderStyle);
Example 4
Demonstration of all different values: var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Try it yourself
Syntax
Sets the borderStyle property:Returns the borderStyle property:
.style.borderStyle
Sets the borderStyle property:object .style.borderStyle =
value | Value |
---|---|
Description | none |
Defines a border without borders. Default. | hidden |
Same as "none", except in resolving border conflicts for table elements. | dotted |
Defines a dotted border. | dashed |
Defines a dashed border. | solid |
Defines a solid border. | double |
Defines two borders. The width of both borders is the same as the value of border-width. | groove Defines a 3D inset border. The effect depends on border-color |
Defines a 3D groove border. The effect depends on | ridge Defines a 3D inset border. The effect depends on border-color |
Defines a 3D ridge border. The effect depends on | inset Defines a 3D inset border. The effect depends on border-color |
The value of | Defines a 3D outset border. The effect depends on the value of border-color. |
initial | Sets this property to its default value. See initial. |
inherit | Inherits this property from its parent element. See inherit. |
Technical details
Default value: | None |
---|---|
Return value: | A string representing the style of the element's border. |
CSS version: | CSS1 |
Browser support
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Støtte | Støtte | Støtte | Støtte | Støtte |
- Forrige side borderSpacing
- Næste side borderTop
- Gå tilbage til forrige niveau HTML DOM Style object