Core Framework v2.2.0 – Documentation

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