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: 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; }