Border radius

Apply common corner radius style to your elements.

Border radius

We use simple harmonic scale for radii. In smaller sizes, each consecutive token is roughly double the previous value. From the median size and on values are sum of two previous tokens instead.

Global radii tokens

radius

2px

xxs

2px. For the smallest components on the screen, usually up to 24px high.

4px

4px. When you're not sure, use this one. It will work well.

8px

8px. For higher components like cards or dialogs. When it's larger than 60px, this one usually works the best.

12px

12px. For large surfaces with large paddings to really bring your content to the attention.

20px

20px. For large surfaces with large paddings to really bring your content to the attention.

32px

32px. For large surfaces with large paddings to really bring your content to the attention.

999.01px

full

For rounding elements

Base token

We calculate each radii token using a base value for easy maintenance.


                                                        
                                                        
                                                            "radius": {
                                                            "xxs": {
                                                              "$type": "borderRadius",
                                                              "$value": "{radius.base} * 0.25",
                                                              "$description": "For the smallest components on the screen, usually up to 24px high."
                                                            }
                                                        }

radius

8px

base

Base size token used in radii calculations. Not used outside design tokens

Usage guidelines

Use xxs - sm radii for smaller elements like buttons, icons and checkboxes

Don't

Use smaller radii for large surfaces like modals and navigation panels.

Use full radius to complement branded content like social buttons.

Don't

Apply full radius to Productboard-branded content.