Border styles

Utility classes for border styles.

The utility helpers for border styles contain a limited list of styles.

Class nameProperties
.border-noneborder-style: none;
.border-{pos}-noneborder-{pos}-style: none;
.border-solidborder-style: solid;
.border-{pos}-solidborder-{pos}-style: solid;
.border-dashedborder-style: dashed;
.border-{pos}-dashedborder-{pos}-style: dashed;
.border-dottedborder-style: dotted;
.border-{pos}-dottedborder-{pos}-style: dotted;
.border-doubleborder-style: double;
.border-{pos}-doubleborder-{pos}-style: double;

All sides

To set the border style to an element, suffix the style, for example .border-dashed.

          <div class="border-dashed border-2 border-river-bed..."></div>
<div class="border-dotted border-2 border-river-bed..."></div>
<div class="border-double border-2 border-river-bed..."></div>
<div class="border-solid border-2 border-river-bed..."></div>
<div class="border-none border-2 border-river-bed..."></div>
          
.border-dashed
.border-dotted
.border-double
.border-solid
.border-none

Individual sides

To set the border style of an element on a particular side, suffix the position {-top | bottom | left | right} and then the style {-style}, for example .border-top-solid.

          <div class="border-top-dashed border-2 border-river-bed..."></div>
<div class="border-right-dotted border-2 border-river-bed..."></div>
<div class="border-bottom-double border-2 border-river-bed..."></div>
<div class="border-left-solid border-2 border-river-bed..."></div>
<div class="border-top-none border-2 border-river-bed..."></div>
          
.border-top-dashed
.border-right-dotted
.border-bottom-double
.border-left-solid
.border-top-none