outline Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:outline

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. outline

Description

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

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

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

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.

Technical Details

Item Value
Default Value: medium none invert
Return Value: A String, representing the outline width, style and/or color of an element
CSS VersionCSS2

Add an outline around a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {/*from  w  ww  .  j a v a  2 s .co  m*/
    border: 1px solid red;
    outline: dotted green;
}
</style>
</head>
<body>

<div id="myDiv" style="outline-width:10px;">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Return outline width</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.outline = '5px dotted green';
}
</script>

</body>
</html>

Related Tutorials