Skip to content
Related Articles

Related Articles

HTML | DOM Style outlineOffset Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 22 Nov, 2021

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>
<p>For moving the ouline border outside the border edge, double click the "Change Outline Border" button: </p>
    <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: 

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Opera
  • Apple Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!