HTML | DOM Style outlineOffset Property
The Style outlineOffset property is used for offsetting an outline and draw it beyond the border edge.
Outlines do not take space, unlike borders. It returns a string which represents the outline-offset property of an element.
Syntax:
- To get the property
object.style.outlineOffset
- To set the property
object.style.outlineOffset = "length|initial|inherit"
Property values:
| Value | Description |
|---|---|
| length | Define length in length unit. |
| initial | define initial value which is default. |
| inherit | Inherit property from parent element |
Below program illustrates the Style outlineOffset property method:
Example:
HTML
<!DOCTYPE html><html><head> <title>Style outlineOffset Property in HTML</title> <style> #samplediv { margin: auto; border: 2px green; outline: coral solid 4px; width: 250px; height: 50px; } h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>Style outlineOffset Property</h2> <br> <p> For moving the outline border outside the border edge, double click the "Change Outline Border" button: </p> <br> <button ondblclick="outline()"> Change Outline Border </button> <div id="samplediv"> <h1>Geeksforgeeks</h1> </div> <script> function outline() { document.getElementById("samplediv") .style.outlineOffset = "20px"; } </script></body></html> |
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by HTML | DOM Style outlineOffset Property are listed below:
- Google Chrome 1
- Edge 15
- Firefox 1.5
- Opera 9.5
- Apple Safari 1.2
Please Login to comment...