Last reviewed: 20 April 2021

Foundations

Borders

You can use borders to create separation between components or sections of content.

Guidelines

Borders should be between 1 and 4 pixels wide.

Use a solid line for borders as these are easy for people to scan along.

The colour contrast of borders must pass the minimum requirements for graphical objects.

Do not overuse borders. If you use lots of borders on a page, it can start to look crowded and may be harder for people to navigate.

Try using headings and spacing to break up pages instead.

Examples

Form input with 2 pixel grey border.

Error state form input with 2 pixel red border.

Alert notification with 4 pixel yellow border.

Success notification with 4 pixel green border.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.