Skip to main content

Border Styles

Version: 2.0.0
Edit

Utilities for setting the border style property.

Border Styles

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

Default Border Style

Dashed Border Style

Dashed Border Style

Inherit Border Style

Initial Border Style

Unset Border Style

<!-- border style default -->
<div class="u-border-style">
  <p>Default Border Style</p>
</div>
<!-- border style dashed -->
<div class="u-border-style-dashed">
  <p>Dashed Border Style</p>
</div>
<!-- border style dotted -->
<div class="u-border-style-dotted">
  <p>Dashed Border Style</p>
</div>
<!-- border style inherit -->
<div class="u-border-style-inherit">
  <p>Inherit Border Style</p>
</div>
<!-- border style initial -->
<div class="u-border-style-initial">
  <p>Initial Border Style</p>
</div>
<!-- border style unset -->
<div class="u-border-style-unset">
  <p>Unset Border Style</p>
</div>

Top Bottom Border Styles

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

Top Border Style

Bottom Border Style

Top Bottom Border Style

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

Right Left Border Styles

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

Right Border Style

Left Border Style

Right Left Border Style

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

Alert Border Styles

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

Danger Alert Border Style

Info Alert Border Style

Success Alert Border Style

Warning Alert Border Style

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