Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.0.0

Border

Add borders to or remove borders from an element

Add borders

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

All borders added using these utility classes have the value 1px solid #dddddd.

Border top
Border right
Border bottom
Border left
Border all
<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>

Add a border radius

Use the .rvt-border-radius utility class to add a subtle .25rem/4px border radius to an element.

Border radius
<div class="rvt-border-all rvt-border-radius rvt-p-all-md">
    <span>Border radius</span>
</div>

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

The examples below show how to use these utility classes to remove borders from a box component.

No top border
No right border
No bottom border
No left border
No border
<div class="rvt-box rvt-border-top-none rvt-p-all-md">
    <span>No top border</span>
</div>

<div class="rvt-box rvt-border-right-none rvt-m-top-md rvt-p-all-md">
    <span>No right border</span>
</div>

<div class="rvt-box rvt-border-bottom-none rvt-m-top-md rvt-p-all-md">
    <span>No bottom border</span>
</div>

<div class="rvt-box rvt-border-left-none rvt-m-top-md rvt-p-all-md">
    <span>No left border</span>
</div>

<div class="rvt-box rvt-border-all-none rvt-m-top-md rvt-p-all-md">
    <span>No border</span>
</div>

On this page

    • Add borders
    • Add a border radius
    • Remove borders
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University