# Border utilities

### Border classes

You can add solid borders to an element using following classes. You're able to change the border color using border color utility classes.

The classes follows b{side}-{size} format, where `{size}` is one of `0`, `1`, `2`, or `3` values. Also, `{side}` is one of:

- `t`: Border top
- `b`: Border bottom
- `l`: Border left
- `r`: Border right
- `x`: Border left and right
- `y`: Border top and bottom
- null: All sides

`<div class="b-1"></div>`
`<div class="bx-2"></div>`
`<div class="by-3"></div>`
`<div class="bl-3 border-primary"></div>`
`<div class="br-2 border-purple"></div>`
`<div class="bt-1 border-danger"></div>`
`<div class="bb-1 border-info"></div>`

Following table demonstrates available classes for 1px border.

Class name | Description
--- | ---
`.bt-1` | border-top: 1px solid ...
`.bb-1` | border-bottom: 1px solid ...
`.bl-1` | border-left: 1px solid ...
`.br-1` | border-right: 1px solid ...
`.bx-1` | border-left: 1px solid ... border-right: 1px solid ...
`.by-1` | border-top: 1px solid ... border-bottom: 1px solid ...
`.b-1` | border: 1px solid ...