Javascript Reference - HTML DOM Style outline Property








The outline property sets or gets all the outline properties, in a shorthand form.

?With outline property, we can set/get the following properties.

  • outline-width
  • outline-style
  • outline-color




Browser Support

outline Yes 9.0 Yes Yes Yes

Syntax

Return the outline property:

var v = object.style.outline;

Set the outline property:

object.style.outline='width style color|initial|inherit'

Property Values

Parameter Description
width Set the outline width
style Set the outline style
color Set the outline color
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: medium none invert
Return Value: A string representing the outline width, style and color
CSS Version CSS2

Example

The following code shows how to add an outline around a <div> element


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w w  w.  j  a  va  2 s .  co m-->
    border: 3px solid red;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">Set outline</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.outline = "thick solid red";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the width, style and color of the outline of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w w  w. j  a va 2  s  .  c  om-->
    border: 3px solid red;
    outline: 3px solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.outline = "5px dotted green";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the outline property values of a <div> element.


<!DOCTYPE html>
<html>
<body>
<!--from   ww  w .j a  va  2 s.c o  m-->
<div id="myDiv" style="border:3px solid red;outline:3px dotted green">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.outline);
}
</script>

</body>
</html>

The code above is rendered as follows: