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

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.

#experience-library-support

Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

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