To offset an outline, use the outlineOffsetproperty. It allows you to draw the outline beyond the border edge.
You can try to run the following code to offset an outline and draw it beyond the border edge with JavaScript.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
margin-left: 20px;
}
</style>
</head>
<body>
<p>Click below to add Outline Offset.</p>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<button type="button" onclick="display()">Set Outline Offset</button>
<br>
<script>
function display() {
document.getElementById("box").style.outline = "thick solid";
document.getElementById("box").style.outlineColor = "#5F5F5F";
document.getElementById("box").style.outlineOffset = "7px";
}
</script>
</body>
</html>