# Border Properties

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

## Class

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

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

## Code Sample

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

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

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

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

## Variable

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