StylePlayground ↬ Border Utility Class Reference

There are several border utility classes available. The base border class will set the border and the border width. Other utility classes can be used to set the border color and border radius. View examples ↓

<!-- basic border use -->
<div class="border-1"> … </div>

Border Width Options

.border-0
.border-1
.border-2 
.border-3 
.border-4 
.border-5 
.border-10  

Border Colors

Border color can be changed to use any of the color options available in the color pallet. The border color classes use the pattern of border__color-[color]-[value] — for example: border__color-grey-400. The default color of the border is --color-grey-300.

Border Radius

There are 5 preset border-radius utility classes available from 1-5. These classes use the pattern of border__radius-[value]. These are also available as custom properties for the use in generating styles for other components. The output values are listed below for reference.

Border Position Options

By default, adding border classes will add borders on all sides of the item. You may also limit the border to one of the four sides by adding one of the following classes: .border__top .border__right .border__bottom .border__left. These can not be combined.

Border Examples

Basic border adding width and default color

Border Radius Options

Note: border__color-grey-600 added for increased visibility

Border Position Options

Note: border__color-grey-400 added for increased visibility. bg-color-grey-200 added to help define the box.