Skip to main content

Border Colors

Version: 2.0.0
Edit

Utilities for setting border colors.

Border Colors

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/border-colors.scss#L9

Default Border Color

Black Border Color

Red Border Color

Blue Border Color

On Dark Border Color

On Light Border Color

<!-- border color default -->
<div class="u-border-color">
  <p>Default Border Color</p>
</div>
<!-- border color black -->
<div class="u-border-color-black">
  <p>Black Border Color</p>
</div>
<!-- border color red -->
<div class="u-border-color-red">
  <p>Red Border Color</p>
</div>
<!-- border color blue -->
<div class="u-border-color-blue">
  <p>Blue Border Color</p>
</div>
<!-- border color on dark -->
<div class="u-border-color-on-dark">
  <p>On Dark Border Color</p>
</div>
<!-- border color on light -->
<div class="u-border-color-on-light">
  <p>On Light Border Color</p>
</div>

Top Bottom Border Colors

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/border-colors.scss#L80

Top Border Color

Bottom Border Color

Top Bottom Border Color

<!-- border color top -->
<div class="u-border-color-top">
  <p>Top Border Color</p>
</div>
<!-- border color bottom -->
<div class="u-border-color-bottom">
  <p>Bottom Border Color</p>
</div>
<!-- border color top bottom -->
<div class="u-border-color-top-bottom">
  <p>Top Bottom Border Color</p>
</div>

Right Left Border Colors

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/border-colors.scss#L217

Right Border Color

Left Border Color

Right Left Border Color

<!-- border color right -->
<div class="u-border-color-right">
  <p>Right Border Color</p>
</div>
<!-- border color left -->
<div class="u-border-color-left">
  <p>Left Border Color</p>
</div>
<!-- border color right left -->
<div class="u-border-color-right-left">
  <p>Right Left Border Color</p>
</div>

Alert Border Colors

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/border-colors.scss#L354

Danger Alert Border Color

Info Alert Border Color

Success Alert Border Color

Warning Alert Border Color

<!-- border color danger -->
<div class="u-border-color-danger">
  <p>Danger Alert Border Color</p>
</div>
<!-- border color info -->
<div class="u-border-color-info">
  <p>Info Alert Border Color</p>
</div>
<!-- border color success -->
<div class="u-border-color-success">
  <p>Success Alert Border Color</p>
</div>
<!-- border color warning -->
<div class="u-border-color-warning">
  <p>Warning Alert Border Color</p>
</div>