The CSS property outline
allows you to define an outline on an element. It’s very similar to a normal CSS border
except for a few things:
1. The outline is placed outside of the element. Another way of looking at is the outline is placed outside the elements margin.
2. They don’t take space since they’re outside the content.
Outline
.outline {
outline: 5px solid #4D1919;
}
It can allow for some particularly cool designs.
Changing the outline size does not change the spacing between the boxes.
On top of that, outline-offset
is a CSS property that can offset the outline.
Outline Offset
.outline {
outline-offset: 5px;
}
HTML
CSS
Output