CSS Outline Offset:-

We use the CSS outline offset property adding space between an outline and the edge /border of an element. The space we will give between an outline and its element will be transparent.

The following example specifies an outline 10px outside the border edge:



<!DOCTYPE html>

<html>

<head>

<style>

p {margin: 30px;

border: 2px solid black;

outline: 2px solid red;

outline-offset: 10px;

}

</style>

</head>

<body>

<h1> CSS Outline Offset Property </h1>

<p> The paragraph that you are seeing has 10px outside the border edge.</p>

</body>

</html>

Try this code for a better experience 



The following example shows the transparency space between its outline and element:



<!DOCTYPE html>

<html>

<head>

<style>

p {margin: 30px;

background: yellow;

border: 2px solid black;

outline: 2px solid red;

outline-offset: 10px;

}

</style>

</head>

<body>

<h1> CSS Outline Offset Property </h1>

<p> The paragraph that you are seeing has 10px outside the border edge.</p> 

</body>

</html>

Try this code for a better experience