Borders

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

Drawing
Coloring
Border Types
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