Skip to main content

Borders

Use border classes to add solid borders or set border radii on elements.

Shorthand​

info

These utility classes do not specify colors, only the style and the width.

.border​

.border--t​

.border--r​

.border--b​

.border--l​

.border--none​

Border Radius - All Sides​

Use rounded classes to set the border radius of an element. Pre-defined sizes are:

  • tiny
  • small
  • med
  • large
  • circle
  • pill

.rounded--tiny​

.rounded--small​

.rounded--med​

.rounded--large​

.rounded--extra-large​

.rounded--huge​

.rounded--circle​

.rounded--pill​

Border Radius - Top​

Apply border radius to only the top side.

.rounded-top--tiny​

.rounded-top--small​

.rounded-top--med​

.rounded-top--large​

.rounded-top--extra-large​

.rounded-top--huge​

.rounded-top--circle​

.rounded-top--pill​

Border Radius - Right​

Apply border radius to only the right side.

.rounded-right--tiny​

.rounded-right--small​

.rounded-right--med​

.rounded-right--large​

.rounded-right--extra-large​

.rounded-right--huge​

.rounded-right--circle​

.rounded-right--pill​

Border Radius - Bottom​

Apply border radius to only the bottom side.

.rounded-bottom--tiny​

.rounded-bottom--small​

.rounded-bottom--med​

.rounded-bottom--large​

.rounded-bottom--extra-large​

.rounded-bottom--huge​

.rounded-bottom--circle​

.rounded-bottom--pill​

Border Radius - Left​

Apply border radius to only the left side.

.rounded-left--tiny​

.rounded-left--small​

.rounded-left--med​

.rounded-left--large​

.rounded-left--extra-large​

.rounded-left--huge​

.rounded-left--circle​

.rounded-left--pill​