Decoration around border

How to use it

Put a border around an element or area, and then put visual decoration around the border, placed behind the element/area so that the area covers the background decoration partly.

When to use it

If you want to highlight an area, and a border around that area is not enough, you can add decoration to the border in a way that means the area itself is still fully visible. This is useful if you've got very playful or visually rich branding, because this is quite a "heavy" visual approach.

What to watch out for

The border should stand out against the background, so choosing a high contrast colour might be difficult if your background decoration is multi-coloured.

Examples

Example