Border

Add or remove borders

Overview #

Use the border utilities to add borders to an element. You can also give elements a border radius or remove borders from an element that has them by default.

Examples #

Choose an example

Open in new window Copy link to example

<div class="rvt-border-top rvt-p-all-md">
  <span>Border top</span>
</div>
<div class="rvt-border-right rvt-m-top-md rvt-p-all-md">
  <span>Border right</span>
</div>
<div class="rvt-border-bottom rvt-m-top-md rvt-p-all-md">
  <span>Border bottom</span>
</div>
<div class="rvt-border-left rvt-m-top-md rvt-p-all-md">
  <span>Border left</span>
</div>
<div class="rvt-border-all rvt-m-top-md rvt-p-all-md">
  <span>Border all</span>
</div>

Open in new window Copy link to example

<div class="rvt-border-all rvt-border-color-blue rvt-bg-blue-000 rvt-m-top-md rvt-p-all-md">
  <span>Blue border</span>
</div>
<div class="rvt-border-all rvt-border-color-crimson rvt-bg-crimson-000 rvt-m-top-md rvt-p-all-md">
  <span>Crimson border</span>
</div>
<div class="rvt-border-all rvt-border-color-gold rvt-bg-gold-000 rvt-m-top-md rvt-p-all-md">
  <span>Gold border</span>
</div>
<div class="rvt-border-all rvt-border-color-green rvt-bg-green-000 rvt-m-top-md rvt-p-all-md">
  <span>Green border</span>
</div>
<div class="rvt-border-all rvt-border-color-orange rvt-bg-orange-000 rvt-m-top-md rvt-p-all-md">
  <span>Orange border</span>
</div>
<div class="rvt-border-all rvt-border-color-purple rvt-bg-purple-000 rvt-m-top-md rvt-p-all-md">
  <span>Purple border</span>
</div>

Open in new window Copy link to example

<div class="rvt-border-all rvt-border-radius-sm rvt-p-all-md rvt-m-bottom-md">
  <span>Small border radius</span>
</div>

<div class="rvt-border-all rvt-border-radius-md rvt-p-all-md rvt-m-bottom-md">
  <span>Medium border radius</span>
</div>

<div class="rvt-border-all rvt-border-radius-lg rvt-p-all-md rvt-m-bottom-md">
  <span>Large border radius</span>
</div>

<div class="rvt-border-all rvt-border-radius-circle rvt-p-all-md rvt-m-bottom-md">
  <span>Circle border radius</span>
</div>

Usage #

Add borders to an element using the following utility classes:

.rvt-border-top
.rvt-border-right
.rvt-border-bottom
.rvt-border-left
.rvt-border-all

Set border color #

Set an element’s border color using the following utility classes:

.rvt-border-color-blue
.rvt-border-color-crimson
.rvt-border-color-gold
.rvt-border-color-green
.rvt-border-color-orange
.rvt-border-color-purple

Set border radius #

Set an element’s border radius using the following utility classes:

.rvt-border-radius-sm
.rvt-border-radius-md (alias of .rvt-border-radius)
.rvt-border-radius-lg
.rvt-border-radius-circle

Remove borders #

Remove borders from an element using the following utility classes:

.rvt-border-top-none
.rvt-border-right-none
.rvt-border-bottom-none
.rvt-border-left-none
.rvt-border-all-none