> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/design-pricinples/corner-radius.md).

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

![](/files/l1Q7p8oqDbNdIhe9on8V)

#### 1. Large dimension UI elements

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

![](/files/lkmSrR0SoHtMjX5KjELX)

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

![](/files/x2mw0PpfwQtVtbP2fSRd)

![](/files/jJKC3Rta3lhitPyh5J5p)

**UI elements:** 

* Card 
* Modal
* Popconfirm

#### 2. Medium dimension UI elements

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

![](/files/ezfxignBVjJ3GkA4reWU)

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

![](/files/VmP3HKCTkg0HG9uYAJZh)

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

![](/files/O5ta1r0BBDdNWm6Yb9xr)

### Sample code

```
// Some code
```