# Rounded Border

{% hint style="info" %}
Since `1.7.0`
{% endhint %}

## Class

```css
.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}
```

```css
.rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

## Code Sample

#### .rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}

```markup
<div class="rounded--1 bg--gainsboro pa--2">.rounded--1</div>
<div class="rounded--5 bg--gainsboro pa--2">.rounded--5</div>
<div class="rounded--10 bg--gainsboro pa--2">.rounded--10</div>
<div class="rounded--full bg--gainsboro pa--2">.rounded--full</div>
```

#### .rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

```markup
<div class="rounded--t--10 bg--gainsboro pa--2">.rounded--t--10</div>
<div class="rounded--r--10 bg--gainsboro pa--2">.rounded--r--10</div>
<div class="rounded--b--10 bg--gainsboro pa--2">.rounded--b--10</div>
<div class="rounded--l--10 bg--gainsboro pa--2">.rounded--l--10</div>
```

## Variable

| Class          | Properties            |
| -------------- | --------------------- |
| `.rounded--1`  | `border-radius: 1px`  |
| `.rounded--2`  | `border-radius: 2px`  |
| `.rounded--3`  | `border-radius: 3px`  |
| `.rounded--4`  | `border-radius: 4px`  |
| `.rounded--5`  | `border-radius: 5px`  |
| `.rounded--6`  | `border-radius: 6px`  |
| `.rounded--7`  | `border-radius: 7px`  |
| `.rounded--8`  | `border-radius: 8px`  |
| `.rounded--9`  | `border-radius: 9px`  |
| `.rounded--10` | `border-radius: 10px` |