Border Radius

Rounded edges are easy on the eyes and require a lesser cognitive load to process visually than sharper edges. Rounded corners also point inwards to the center of an element, allowing users to focus on the contents within it.

Our border radius styles are mainly categorized by Element type and Size.

Border Radius / container / sm

4px

border_radius

The recommended small border-radius for containers. Eg in-line alert

Border Radius / container / md

8px

border_radius

The recommended medium border-radius for containers. Eg cards

Border Radius / container / full

100%

border_radius

The recomended border radius for circle-shaped containers.

Border Radius / container / lg

16px

border_radius

The recommended large border-radius for large containers, like modals.

Border Radius / interactive / sm

4px

border_radius

The recommended small border-radius for interactive component. Eg Buttons

Border Radius / interactive / xl

100%

border_radius

The recommended xlarge border-radius for interactive component. Eg handle of the slider

Border Radius / interactive / lg

16px

border_radius

The recommended large border-radius for interactive component. Eg Tags

Text-based inputs border radius

Border Radius / form_control / text_input / md

4px

border_radius

The recommended medium border-radius for inputs

Border Radius / form_control / text_input / sm

2px

border_radius

The recommended small border-radius for inputs

Border Radius / form_control / text_input / lg

8px

border_radius

The recommended large border-radius for inputs

Border Radius / focus_outline / xl

20px

border_radius

The recommended xlarge border-radius for focus. Eg toggle

Border Radius / focus_outline / lg

16px

border_radius

The recommended large border-radius for focus. Eg segmented control

Border Radius / focus_outline / sm

4px

border_radius

The recommended small border-radius for focus. Eg input control

Border Radius / focus_outline / full

100%

border_radius

The recommended full border-radius for focus. Eg avatar

Border Radius / focus_outline / md

8px

border_radius

The recommended medium border-radius for focus. Eg check box

Border Radius / focus_outline / xs

2px

border_radius

The recommended xsmall border-radius for focus. Eg icons

Something looks broken on this site?

Report it to the Design System team here!

Border Radius

Text-based inputs border radius

Something looks broken on this site?

Resources

Support