# Border utilities

### Border classes

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

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

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