- An outline is a line that is drawn around elements, outside the borders.
- Diagram of outline:
![](https://thecoderbrainnetin.wordpress.com/wp-content/uploads/2020/12/outline.png?w=599)
- E.g.:
<html>
<head>
<style>
p {
border: 1px solid black;
outline: yellow solid 10px;
text-align: center;
}
</style>
</head>
<body>
<p>Outline demo</p>
</body>
</html>
- Output:
![](https://thecoderbrainnetin.wordpress.com/wp-content/uploads/2020/12/outlineoutput.png?w=511)
- Outline offset: This is an outline property which is used to add space between outline & border of an element. This space is transparent.
- Outline offset demo:
<html>
<head>
<style>
p {
border: 1px solid black;
outline: yellow solid 10px;
text-align: center;
outline-offset: 15px;
margin:30px;
}
</style>
</head>
<body>
<p>Outline demo</p>
</body>
</html>
- Output:
![](https://thecoderbrainnetin.wordpress.com/wp-content/uploads/2020/12/outlineoffset.png?w=482)