Last reviewed: 20 April 2021

Foundations

Radius

We use border radius in our designs to give elements or components rounded corners.

This makes the edges of cards or buttons easier to see.

Guidelines

Elements and components in the design system have the correct border radius applied.

If you are building something new, this table shows what each radius should be used for:

Radius Usage
5px Form inputs
8px Buttons, cards and signposts

Example

Form input with 5px border radius.

Button with 8px border radius.

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.