Style outlineStyleProperty
Style Object
Definition and Usage
The outlineStyle property sets or returns the style of the outline around an element.
Syntax
Set the outlineStyle property:
Object.style.outlineStyle="value"
Return the outlineStyle property:
Object.style.outlineStyle
| Value | Description |
|---|---|
| none | Default. Defines no outline. |
| hidden | The outline is turned off. |
| dotted | Defines a dotted outline. |
| dashed | Defines a dashed outline. |
| solid | Defines a solid outline. |
| double | Defines a double outline. |
| groove | Defines a 3D grooved outline. The effect depends on the outline-color value. |
| ridge | Defines a 3D ridged outline. The effect depends on the border-color value. |
| inset | Defines a 3D inset outline. The effect depends on the border-color value. |
| outset | Defines a 3D outset outline. The effect depends on the border-color value. |
| inherit | The style of the outline is inherited from the parent element. |
Browser Support
All major browsers support the outlineStyle property.
Note:IE7 and earlier versions do not support the outlineStyle property. IE8 supports the outlineStyle property only if a !DOCTYPE is specified. IE9 supports the outlineStyle property.
Tips and Notes
An outline is a line drawn around an element. It is displayed around the element's margin. However, it is different from the border property.
The outline is not a part of the element's dimensions, therefore the element's width and height properties do not include the width of the outline.
Example
Example
Change the style of an outline:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineStyle="solid";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Modify outline style</button>
<p><b>Note:</b> IE8 supports the outline property only if a !DOCTYPE is specified.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineStyle="solid";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Modify outline style</button>
<p><b>Note:</b> IE8 supports the outline property only if a !DOCTYPE is specified.</p>
</body>
</html>
Try it Yourself »
Style Object Other Extensions