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-radius rvt-p-all-md">
  <span>Border radius</span>
</div>

Open in new window Copy link to example

<div class="rvt-border-radius-circle rvt-bg-black-100 rvt-p-all-md rvt-inline-flex">
  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
    <path fill="currentColor" d="M14.57,12.06,13,9.7V6A5,5,0,0,0,3,6V9.7L1.43,12.06a1.25,1.25,0,0,0,1,1.94H6a2,2,0,0,0,4,0h3.53a1.25,1.25,0,0,0,1-1.94ZM8,12H3.87L5,10.3V6a3,3,0,0,1,6,0v4.3L12.13,12Z" />
  </svg>
</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

Add a border radius #

Use the .rvt-border-radius utility class to add a subtle border radius to an element’s corners.

Use the .rvt-border-radius-circle utility class to give an element a circular appearance. This can be useful for elements with an icon on a background color.

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