Style outlineWidthProperty
Style Object
Definition and Usage
The outlineWidth property sets or returns the width of the outline around an element.
Syntax
Setting the outlineWidth property:
Object.style.outlineWidth="thin|medium|thick|length|inherit"
Returning the outlineWidth property:
Object.style.outlineWidth
| Value | Description |
|---|---|
| thin | Defines a thin outline. |
| medium | Default. Defines a medium outline. |
| thick | Defines a thick outline. |
| length | Defines the width of the outline using units such as px, cm, etc. |
| inherit | The width of the outline is inherited from the parent element. |
Browser Support
All major browsers support the outlineWidth property.
Note:IE7 and earlier versions do not support the outlineWidth property. IE8 supports the outlineWidth property only if a !DOCTYPE is specified. IE9 supports the outlineWidth property.
Tips and Notes
The 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 part of the element's dimensions, so the element's width and height properties do not include the width of the outline.
Example
Example
Change the width of an outline:
<html>
<head>
<style type="text/css">
#ex1
{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.outlineWidth="10px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change outline width</button>
</body>
</html>
<head>
<style type="text/css">
#ex1
{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.outlineWidth="10px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change outline width</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions