Border styles
Utility classes for border styles.
The utility helpers for border styles contain a limited list of styles.
Class name | Properties |
---|---|
.border-none | border-style: none; |
.border-{pos}-none | border-{pos}-style: none; |
.border-solid | border-style: solid; |
.border-{pos}-solid | border-{pos}-style: solid; |
.border-dashed | border-style: dashed; |
.border-{pos}-dashed | border-{pos}-style: dashed; |
.border-dotted | border-style: dotted; |
.border-{pos}-dotted | border-{pos}-style: dotted; |
.border-double | border-style: double; |
.border-{pos}-double | border-{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