# Corner radius

### Rounded corners

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2F7SxQ1YxsJab85QxteuN8%2FCorner%201.png?alt=media\&token=79f78f2d-ab7f-47ab-a537-91dec9667c1e)

#### 1. Large dimension UI elements

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FOGR3BKZlJzTsGy5DGxOa%2FCorner%202.png?alt=media\&token=f2de997d-df41-4183-bcb2-6671866fd296)

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FrXblcCYjmfKE9lnIchL7%2Fcorner%203.png?alt=media\&token=a873d67a-10be-448e-a214-3fa670e12be7)

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2Fx03mVSq79g479ZfWYWcA%2Fcorner%204.png?alt=media\&token=2337e40c-af70-4323-8ee3-a17e40019511)

**UI elements:** 

* Card 
* Modal
* Popconfirm

#### 2. Medium dimension UI elements

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FZoBc6PoLP5BwULRXCtDv%2FCorner%205.png?alt=media\&token=6a1fb97d-7749-42e5-a58e-5289b580f82d)

**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.

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FTwjv8390yji3bdnSbGQy%2FCorner%206.png?alt=media\&token=ffd7797f-51d8-459e-9bd0-f4dc6737a346)

**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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FqhTeFJb77Cnn6HtCpvW7%2FCorner%207.png?alt=media\&token=0bc2f600-fdbd-4b49-a9a3-9176b57b245a)

### Sample code

```
// Some code
```