Corner radius

Sen OS applies rounded corners to almost UI elements. The same applies to most common controls such as Button, Card, Input...

Rounded corners

There are three areas of the controls where the rounded corner styles are used: large, medium and small dimension UI elements.

1. Large dimension UI elements

The default radius value we use for these UI elements is 16px.

Sen OS uses max two levels of rounding depending on inside contents.

UI elements:

  • Card

  • Modal

  • Popconfirm

2. Medium dimension UI elements

The default radius value we use for these UI elements is 8px.

UI elements:

  • Button

  • Input

  • Select

  • Tooltip

  • List

  • Radio button

  • Dropdown

3. Small dimension UI elements

The default radius value we use for these UI elements is 4px.

UI elements:

  • ScrollBar

  • Slider

  • Checkbox

When not to round?

There are instances where the corner of a control should not be rounded, and we don't round these by default:

  • Dropdown

Sample code

// Some code

PreviousColorNextDrawer

Last updated