Outline offset property (outline-offset)

The outline-offset property allows you to insert a space between the border and outline of an element.

The outline-offset property for an element can be styled just like the border property. However, it is not included as part of the box-model and therefore not added to the width of the element being displayed. The outline is typically rendered right outside the border with no space between the border and the outline.

Generally outlines defer from borders in two ways:

Outlines do not take up space
Outlines may be non-rectangular

Syntax:

selector {

outline-offset: length | initial | inherit;

}

Values:

The main value of the outline-offset property is length (number, percentage), but the complete list of values is:

length; Defines the distance between outline and outset of border (default value is 0).
initial, inherit

Example

The example with outline-offset property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h4 {
   margin-top:10px; margin-bottom:10px;
}
div {
    font-family:Arial; font-size:16px; color:#efe999; 
    font-weight:bold; text-align: center;
    width:25%; height:auto; padding:10px; margin:8% 12%;
    background-color:#999efe;
    border:10px solid #efe999; border-top-right-radius:25px; border-top-left-radius:25px; border-bottom-left-radius:25px;
    outline: 10px groove #eee;
    outline-offset:10px;
    /* ADD proprietary selectors if needed */
}
</style>
</head>
  
<body>

<h4>The outline-offset property example:</h4>

<div>
This is the box with property OUTLINE
</div>
</body>
</html>

›› go to examples ››

Outline offset property (outline-offset)

Syntax:

Values:

Example

The example with outline-offset property:

Comments

About

Contact

Get Connected