Javascript DOM CSS Style outline Property

Introduction

Add an outline around a <div> element: 

document.getElementById("myDiv").style.outline = "thick solid #0000FF";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {//from  w w w.jav  a2  s .c  o  m
  border: 3px solid red;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Set outline</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.outline = "thick solid #0000FF";
}
</script>

</body>
</html>

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

With this property, you can set/get one or more of the following:

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

An outline is a line around an element.

It is displayed around the margin of the element.

The outline is not a part of the element's dimensions.

The element's width and height properties do not contain the width of the outline.

Property Values

Parameter Description
width Sets the width of the outline
style Sets the style of the outline
color Sets the color of the outline
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The outline property Default Value: medium none invert

The outline property returns a String representing the outline width, style and/or color of an element.




PreviousNext

Related