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
Last updated