Borders

Use border utilities to style the border and border radius of an element.

Notation

Border utilities are always can be applied to all breakpoints (from xs to lg). The syntax for usage is as follows:

// Without breakpoint
.border
.border-{value}                          // .border-0
.border-{position}                       // .border-top
.border-{position}-{value}               // .border-top-0
// With breakpoint
.border-{breakpoint}                     // .border-md
.border-{breakpoint}-{value}             // .border-sm-0
.border-{position}-{breakpoint}          // .border-left-md
.border-{position}-{breakpoint}-{value}  // .border-left-xs-0

Additive

<div className="additive">
  <span className="border" />
  <span className="border-top" />
  <span className="border-right" />
  <span className="border-bottom" />
  <span className="border-left" />
</div><div className="additive">
  <span className="border" />
  <span className="border-top" />
  <span className="border-right" />
  <span className="border-bottom" />
  <span className="border-left" />
</div>

Subtractive

<div className="subtractive">
  <span class="border-0" />
  <span class="border-top-0" />
  <span class="border-right-0" />
  <span class="border-bottom-0" />
  <span class="border-left-0" />
</div><div className="subtractive">
  <span class="border-0" />
  <span class="border-top-0" />
  <span class="border-right-0" />
  <span class="border-bottom-0" />
  <span class="border-left-0" />
</div>

Colors

<div className="colors">
  <span class="border border-blue" />
  <span class="border border-coral" />
  <span class="border border-gold" />
  <span class="border border-green" />
  <span class="border border-orange" />
  <span class="border border-purple" />
  <span class="border border-red" />
</div><div className="colors">
  <span class="border border-blue" />
  <span class="border border-coral" />
  <span class="border border-gold" />
  <span class="border border-green" />
  <span class="border border-orange" />
  <span class="border border-purple" />
  <span class="border border-red" />
</div>

Borders

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Notation

Additive

Subtractive

Colors

Notation