CSS Outline Offset

CSS Outline Offset

Outline Offset
The outline-offset property is used to add a transparent space between the outline, and the border of the element.
Syntax - 
We can use outline offset property written as follows - 
outline-offset: value;
Now we will see how outline is different from border  - 
  • The outline is drawn outside borders and not inside.
  • The outline may be non-rectangular in shape.
  • The outline does not take space by default
Now We will See Example - 
Example - 
<!DOCTYPE html>
<html lang="en">
    body {
#upperdiv {
#inner {
  background-color:rgb(31, 145, 184);
  outline: 5px solid red;
  outline-offset: 10px;

<link rel="stylesheet" href="sample.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="upperdiv">
<div id="inner">This is a div inside another div used to explain outline-offset property</div>

Output -