← All elements
<a class="dc" href="#">Hover or focus me</a>About this border
A card with an inner border and an offset outer outline that expands on hover and keyboard focus.
How it works
The card has a solid border and a separate outline set a few pixels away with outline-offset. On hover or keyboard focus the offset grows, which pushes the outline outward, and its colour changes, so the card looks like it is lifting out of a frame. Outlines never affect layout, so nothing around it moves.
Ways to customise it
- Change the outline colours for rest and hover.
- Edit the offsets of 4px and 11px.
- Change the border colour and radius.
Good to know
Because the effect also runs on :focus-visible, it doubles as a clear focus style, which helps keyboard users. Outlines follow border-radius in current browsers.
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.