Core Framework v1.3.0 – Documentation

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

  1. Drawing
  2. Coloring
  3. Border Types
  4. 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 appear to 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