Borders
Border classes are separated into three groups. They are used to draw, color, and style borders.
Drawing
These classes will draw borders in the default color on the designated sides of the element. Borders are always 1px wide.
<div class="border"> Borders on all sides </div>
<div class="border-vertical" data-qa-regression="borders_drawing_vertical"> Vertical borders </div>
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.).
<div class="border border-error" data-qa-regression="borders_coloring"> Something in here resulted in an error </div>
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.
<div class="border border-dotted"> Dotted borders </div>
<div class="border border-bottom-dotted" data-qa-regression="borders_types_dotted-bottom"> Dotted bottom border </div>
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.
<div class="border-none" style="border: 1px solid black"> Borders disabled on all sides </div>
<div class="border-top-none" style="border: 1px solid black"> Borders disabled on the top </div>