Style outlineProperty
Style Object
Definition and Usage
The outline property sets or returns all outline properties in shorthand form.
Syntax
Setting the outline property:
Returning the outline property:
Note:The outline property has no default value.
| Parameters | Description |
|---|---|
| width | Sets the width of the outline. |
| style | Sets the style of the outline. |
| color | Sets the color of the outline. |
| inherit | Specifies that the value of the outline property should be inherited from the parent element. |
Browser Support
All major browsers support the outline property.
Note:IE7 and earlier versions do not support the outline property. IE8 supports the outline property only if a !DOCTYPE is specified. IE9 supports the outline property.
Tips and Notes
An outline is a line that is 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, style, and color of an outline around a div element:
<html>
<head>
<meta charset="utf-8">
<title>Example 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.outline="thick solid #0000FF";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Modify Outline</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