Offset border and background

How to use it

Create an element with a background and a border and offset the two so that they don’t line up.

When to use it

This adds some visual interest to your design, and can help reinforce a brand which doesn’t follow the rules. It’s still a clean effect, though, so it strikes a nice balance.

What to watch out for

This element might be hard to align with others. You've got two “parts” which sit on different grids (the background and the border).

Examples