Borders

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

All border classes start with the fragment .border-.

Drawing
Coloring
Border Types
Rounded Borders

Drawing

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

Elements with borders
(Border colors and padding added for demonstrational purposes)

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

Borders on all sides

<div class="border-vertical border-lightblue">
    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 point.

Coloring

The transparent borders from above need to be colored in to be visible (as seen in the previous code examples).

There is a set of colors that you can pick from. In addition to the four signal colors for status reports (confirm, info, etc.), there are some plain colors that are free to use for contrast, focus, or any other application.

Colored borders

<div class="border border-darkgray padding">
    Dark-gray borders
</div>

Dark-gray borders

Colors

These are the colors you can use.

Plain Colors

Light gray: .border-lightgray
Dark gray: .border-darkgray
Light blue: .border-lightblue
Dark blue: .border-darkblue

Status Colors

Confirmation: .border-confirm
Information: .border-info
Warning: .border-warning
Error: .border-error

Border style

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

Note: Unless otherwise specified, borders are always solid.

Element with dotted borders
(Padding added for demonstrational purposes)

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

Dotted borders

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

Dotted bottom border

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|dotted
Solid/Dotted (horizontal): .border-horizontal-solid|dotted
Solid/Dotted (top): .border-top-solid|dotted
Solid/Dotted (bottom): .border-bottom-solid|dotted
Solid/Dotted (left): .border-left-solid|dotted
Solid/Dotted (right): .border-right-solid|dotted

Rounded Borders

Borders can be rounded using the .rounded classes. For more information, please see Box Decoration.

Element with rounded borders
(Padding added for demonstrational purposes)

<div class="border border-darkblue rounded">
    Rounded Borders
</div>

Rounded Borders