outlineStyle Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:outlineStyle

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

Description

The outlineStyle property sets or gets the style of the outline.

Property Values

Value Description
noneNo outline. This is default
hidden The outline is turned off
dotted dotted outline
dashed dashed outline
solid solid outline
double double outline
groove 3D grooved outline.
ridge 3D ridged outline.
inset 3D inset outline.
outset 3D outset outline.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the style of an element's outline
CSS VersionCSS2

Get outline around a <div> element:

Demo Code

ResultView the demo in separate window 

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

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

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.outlineStyle);
}
</script>

</body>
</html>

Related Tutorials