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">
<head>
<style>

body {
background-color:#E7E9EB;
}
#upperdiv {
height:300px;
background-color:#dfdbdb;
}
#inner {
width:130px;
padding:60px;
background-color:rgb(31, 145, 184);
outline: 5px solid red;
outline-offset: 10px;
}

</Style>
<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">
<title>Document</title>
</head>
<body>
<div id="upperdiv">
<div id="inner">This is a div inside another div used to explain outline-offset property</div>

</div>
</body>
</html>

Output -