Definition:
The CSS outline-offset place a space between the outline and the border of an element.
Syntax:
outline-offset: 5px;Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.outline-offset1{
border: 5px solid red;
outline: 10px dashed green;
background-color: pink;
text-align:center;
}
.outline-offset2{
border: 5px solid red;
outline: 10px dashed green;
outline-offset: 5px;
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="outline-offset1">This is a first example where outline-offset is not defined.</div>
</p>
<p> <b>See the below example2 where outline-offset is set to 5px. Here, you can clearly see the space between outline and border of an element.</b>
<div class="outline-offset2">This is a second example where outline-offset is specified in pixel i.e 5px;<br/>outline-offset: 5px; </div>
</body>
</html>
Output:
You may be interested in the following topics:
- CSS Outline-offset
- CSS Outline-width
- CSS Outline-style
- CSS Outline-color
- CSS Outline
- CSS Outline (All Properties)