Borders

Standard .Border class provides a solid neutral 4 border that is 3px.

.Border-left provides a standard border to the left of the container.

.Border-top provides a standard border to the top of the container.

.Border-right provides a standard border to the right of the container.

.Border-bottom provides a standard border to the bottom of the container.

Border Color

Border color can be changed by adding a specific class. The full class list is below. The example below uses our primary green color as a border for the top.

This uses .Border-top and .Border-primary to give a green top border.

Border Size

Standard borders are 3px in width. You can adjust the width by adding a width class. The full class list is below.

This uses .Border-top, .Border-primary and Border5 to give a green top border that is 5px.

Responsive Borders

Borders can be hidden or visible depending on a small or large screen size.

This container has a left border on large screens and a top border on small screens.

Border Radius

Radius class can be applied to give all four corners a radius OR you can specify top or bottom radius. Values range from 1px-10px.

This container has a border with a 5px Radius.

This container has a border with a top 5px Radius.

This container has a border with a bottom 5px Radius.

HTML/CSS

Code Snippet

See the Pen Borders by Wilmington University (@WilmU01) on CodePen.

Class List

.Border = Standard four sided border using $Neutral4 and 3px width border
.Border-left = Left border only
.Border-top = Top border only
.Border-right = Right border only
.Border-bottom = Bottom border only
Border-primary, .Border-primary1, Border-primary2, Border-primary3, Border-primary4 = Changes border color to a primary color
.Border-accent, .Border-accent3 = changes border to an accent color
.Border-neutral1, .Border-neutral2 = changes border to a neutral color
.Border1, .Border2, .Border5, .Border10 = changes border width
.Border-hidden-sm, .BorderL-hidden-sm, .BorderT-hidden-sm, .BorderR-hidden-sm, .BorderB-hidden-sm = Hides the border on a small screen size, must be the last border class applied to the container
.Border-hidden-lg, .BorderL-hidden-lg, .BorderT-hidden-lg, .BorderR-hidden-lg, .BorderB-hidden-lg = Hides the border on a large screen size, must be the last border class applied to the container
.Radius-1 through .Radius-10 = Provides a border radius of 1-10 pixels depending on the number.
.RadiusTop-1 through .RadiusTop-10 = Provides a border top radius of 1-10 pixels depending on the number.
.RadiusBottom-1 through .RadiusBottom-10 = Provides a border bottom radius of 1-10 pixels depending on the number.