Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

HTML | DOM Style outlineOffset Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


  • To get the property
  • To set the property = "length|initial|inherit"

Property values: 

lengthDefine length in length unit.
initialdefine initial value which is default.
inheritInherit property from parent element

Below program illustrates the Style outlineOffset property method:



<!DOCTYPE html>
    <title>Style outlineOffset Property in HTML</title>
        #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;
    <h2>Style outlineOffset Property</h2>
      For moving the outline border outside
      the border edge, double click the
      "Change Outline Border" button:
    <button ondblclick="outline()">
        Change Outline Border
    <div id="samplediv">
        function outline() {
                .style.outlineOffset = "20px";


  • 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

My Personal Notes arrow_drop_up
Last Updated : 21 Dec, 2022
Like Article
Save Article
Similar Reads
Related Tutorials