Skip to main content

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 #


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