CSS Outline Offset
Between an element's edge or border and its outline, outline-offset inserts a transparent space.
Outline 15px outside the border
Here 15px separates the outline from the border edge, on the outside.
Prompt
An HTML page that uses outline-offset to space the outline away from the border.
In an internal
<style> block, give a paragraph margin 30px, padding 5px, a 1px solid black border, a 3px solid red outline, and outline-offset 15px. Add a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline 15px outside the border edge.</p>
</body>
</html>
Transparent gap
Since the space is transparent, the yellow background stops short of it, leaving a visible gap between border and outline.
Prompt
An HTML page that shows the space between an element's border and its outline is transparent.
In an internal
<style> block, give a paragraph margin 30px, padding 5px, a yellow background, a 1px solid black border, a 3px solid red outline, and outline-offset 15px. The yellow background does not fill the offset gap, showing it is transparent. Add a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has an outline 15px outside the border edge. The gap is transparent.</p>
</body>
</html>
CSS Outline Offset with Negative Value
Give outline-offset a negative value and the outline moves to the inner side of the border edge.
Example
With -5px, the red outline sits 5px in from the border edge.
Prompt
An HTML page that uses a negative outline-offset so the outline sits inside the border edge.
In an internal
<style> block, give a paragraph margin 30px, padding 5px, a yellow background, a 1px solid black border, a 3px solid red outline, and outline-offset -5px. Add a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline -5px inside the border edge.</p>
</body>
</html>
All CSS Outline Properties
The outline properties in brief:
outline— one declaration foroutline-width,outline-style, andoutline-color.outline-color— the color the outline is drawn in.outline-offset— the distance from an element's edge or border to its outline.outline-style— which style the outline uses.outline-width— how wide the outline is.