YouTip

# Style borderLeftStyle Property [ Style Object](#) * * * ## Definition and Usage The borderLeftStyle property sets or returns the style of an element's left border. ## Syntax Set the borderLeftStyle property: Object.style.borderLeftStyle="_value_" Return the borderLeftStyle property: Object.style.borderLeftStyle | Value | Description | | :--- | :--- | | none | Default. Defines no border. | | hidden | Same as "none", except for table elements. For tables, hidden is used to resolve border conflicts. | | dotted | Defines a dotted border. | | dashed | Defines a dashed border. | | solid | Defines a solid border. | | double | Defines a double border. The width of the double line is equal to 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 value of border-color. | | outset | Defines a 3D outset border. The effect depends on the value of border-color. | | inherit | The left border style is inherited from the parent element. | * * * ## Browser Support  All major browsers support the borderLeftStyle property. **Note:** IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if a !DOCTYPE is specified. IE9 supports "inherit". * * * ## Example ## Example Change the style of the left border: #ex1 { border: 1px solid #FF0000; } function displayResult() { document.getElementById("ex1").style.borderLeftStyle="dotted"; }
Change style of left border [Try it Yourself »](#) * * Style Object](#)