Corner radius and borders

To show consistent use of corner radius and borders, follow the values we’ve selected below. We have selected values for different breakpoints to ensure smoothness and consistency. A few examples of elements with corner radius and borders are cards and banners.

Tile corner radius

Rounded corners are used throughout the designs to create a friendly, inviting look and feel to the UI. We use rounded corners across almost all UI elements from the smallest level (buttons) to the largest level (cards). We do not use rounded corners on photography. All corners use values of 4 to fit with our 4px spacing system.

Preview	Name	Value
	none	0
	4px	4px
	8px	8px
	12px	12px
	16px	16px
	20px	20px
	full	100%

Desktop (L)

Examples

Tablet (M) and mobile (S)

Examples

Tile borders

We use 1px, grey-200 tile border to provide a subtle cue to users across components, while still maintaining the air of simple, clean, and open across UI.

1px solid #E6E6E6

1px solid #0056D6

1px solid #FF4203

2px solid #E6E6E6

1px solid #FFFFFF

1px solid #808080

1px solid #0056D6

1px solid #DA1E28

1px solid #0C8930

1px solid #808080

1px solid #0056D6

1px solid #DA1E28

1px solid #0C8930

Examples

Example of a component with a border and corner radius

Do's and don'ts

Example of using borders to give clarity to components

Do

Use borders to give clarity to individually existing components.

Example of using borders and shadows within the same component

Don't

Combine borders and shadows within the same component.