Fading border

How to use it

Use a linear gradient on the border of an element so that it fades out of view.

When to use it

This is an expressive choice, so you can use it whenever you like. But it has some practical benefits. For example, if the background is varied the border might be visible when it helps contrast the most, and fade away when it doesn’t.

The example below keeps a gap between the element and its border, but you could use this technique without the gap.

What to watch out for

If the border around the element is there to help provide contrast between the element and its background, then fading the border out isn’t a good idea. Especially if the background or the element might change.

Examples