# Borders

Border classes are separated into three groups. They are used to draw, color, and style borders.

1. Drawing
2. Coloring
3. Border Types
4. Removing Borders

## Drawing

These classes will draw borders in the default color on the designated sides of the element. Borders are always 1px wide.

Elements with borders

    <div class="border">
        Borders on all sides
    </div>

Borders on all sides

    <div class="border-vertical">
        Vertical borders
    </div>

Vertical borders

#### Available Classes

All sides
  `border`
Top border
  `border-top`
Bottom border
  `border-bottom`
Left border
  `border-left`
Right border
  `border-right`
Vertical borders
(top and bottom)
  `border-vertical`
Horizontal borders
(left and right)
  `border-horizontal`

Note: To keep the naming scheme consistent, “vertical” and “horizontal” refer to the sides of the element on which the borders are applied, not the direction in which they appear to point.

## Coloring

In addition to the standard border color, there is a set of signal colors that you can use to indicate a status (confirm, info, etc.).

Colored borders

    <div class="border border-error">
        Something in here resulted in an error
    </div>

Something in here resulted in an error

### Colors

These are the colors you can use.

#### Standard Color

Light gray
  `border`

#### Status Colors

Confirmation
  `border` `border-confirm`
Information
  `border` `border-info`
Warning
  `border` `border-warning`
Error
  `border` `border-error`

## Border Types

These classes change the type of the border on the specified side.

Note that, unless otherwise specified, borders are always solid.

Elements with dotted borders

    <div class="border border-dotted">
        Dotted borders
    </div>

Dotted borders

    <div class="border border-bottom-dotted">
        Dotted bottom border
    </div>

Dotted bottom border

### Available Border Types

Solid (all sides)
  `border-solid`
Dotted (all sides)
  `border-dotted`

If you want to give an individual side a specific border style, use the `border-<side>-<type>` syntax.

Solid/Dotted (vertical)
  `border-vertical-solid` / `border-vertical-dotted`
Solid/Dotted (horizontal)
  `border-horizontal-solid` / `border-horizontal-dotted`
Solid/Dotted (top)
  `border-top-solid` / `border-top-dotted`
Solid/Dotted (bottom)
  `border-bottom-solid` / `border-bottom-dotted`
Solid/Dotted (left)
  `border-left-solid` / `border-left-dotted`
Solid/Dotted (right)
  `border-right-solid` / `border-right-dotted`

## Removing Borders

To remove an existing border on a pre-defined element, use the drawing classes and append the `-none` suffix.

Elements with disabled borders

    <div class="border-none" style="border: 1px solid black">
        Borders disabled on all sides
    </div>

Borders disabled on all sides

    <div class="border-top-none" style="border: 1px solid black">
        Borders disabled on the top
    </div>

Borders disabled on the top