← All elements
<div class="dl2"><span>Offset frame</span></div>About this border
A box with a second outline offset behind it, shifting closer on hover for a layered print look.
How it works
The box has a solid border and a pseudo-element with another border is offset down and right behind it with a negative z-index. On hover both slide together by half the distance, which makes the second outline tuck closer.
Ways to customise it
- Change the second border to another colour.
- Edit the 10px offset.
- Remove the hover for a static frame.
Good to know
Negative z-index can fall behind a parent background, so keep the element in its own stacking context if you place it on a coloured parent.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.