CSS outline-offset

The CSS outline-offset property is used to define/create space between outline and border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 4px solid red; border: 4px solid blue;}
      div.a{outline-offset: 4px;}
   </style>
</head>
<body>

   <h2>Without outline-offset</h2>
   <div>fresherearth</div>
   
   <h2>With outline-offset: 4px</h2>
   <div class="a">fresherearth</div>
   
</body>
</html>

Output

Without outline-offset

fresherearth

With outline-offset: 4px

fresherearth

CSS outline-offset Syntax

The syntax of outline-offset property in CSS, is:

outline-offset: length;

Note - To understand the valid length units allowed in CSS, refer to its separate tutorial.

Note - The initial and inherit are the two keywords that can also be used to define the outline-offset property. The initial is used to use the default value. Whereas the inherit is used to use the value inherited by the parent element.

CSS outline-offset Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 4px solid red; border: 4px solid blue;
         padding: 12px; margin: 20px 10px;}
      div.a{outline-offset: 3px;}
      div.b{outline-offset: -3px;}
      div.c{outline-offset: 8px;}
      div.d{outline-offset: -8px;}
   </style>
</head>
<body>

   <div class="a">outline-offset: 3px</div>
   <div class="b">outline-offset: -3px</div>
   <div class="c">outline-offset: 8px</div>
   <div class="d">outline-offset: -8px</div>
   
</body>
</html>

Output

outline-offset: 3px

outline-offset: -3px

outline-offset: 8px

outline-offset: -8px

CSS Online Test

« Previous Tutorial Next Tutorial »