Class Reference

Border

Class Reference

Border

Border widths, styles and individual sides.

How to use

Combine a width, style and color. Side-specific border classes affect only their named side; a border color alone does not create a visible border.

Responsive behavior

Borders are independent of layout breakpoints unless a tablet or mobile variant is shown. Keep enough padding on a bordered side so content does not touch the line.

Visual reference

Border examples use the installed class styles. Width and side samples show their actual thickness; style samples use 4px for clarity.

Border width

Outline thickness, from 1px to 5px, plus no border.

.border-xsborder-width: 1px · border-style: var(--v4-border-style, solid)

.border-smborder-width: 2px · border-style: var(--v4-border-style, solid)

.border-mdborder-width: 3px · border-style: var(--v4-border-style, solid)

.border-lgborder-width: 4px · border-style: var(--v4-border-style, solid)

.border-xlborder-width: 5px · border-style: var(--v4-border-style, solid)

.border-noneborder-width: 0px · border-style: none

Border style

Styles are shown at 4px so each line pattern is clear.

.border-solid--v4-border-style: solid · border-style: solid

.border-dashed--v4-border-style: dashed · border-style: dashed

.border-dotted--v4-border-style: dotted · border-style: dotted

.border-double--v4-border-style: double · border-style: double

.border-groove--v4-border-style: groove · border-style: groove

.border-ridge--v4-border-style: ridge · border-style: ridge

.border-inset--v4-border-style: inset · border-style: inset

.border-outset--v4-border-style: outset · border-style: outset

Border sides

Each class adds a 1px border only to its named sides.

.border-topborder-top-width: 1px · border-top-style: solid

.border-rightborder-right-width: 1px · border-right-style: solid

.border-bottomborder-bottom-width: 1px · border-bottom-style: solid

.border-leftborder-left-width: 1px · border-left-style: solid

.border-xborder-right-width: 1px · border-left-width: 1px · border-right-style: solid · border-left-style: solid

.border-yborder-top-width: 1px · border-bottom-width: 1px · border-top-style: solid · border-bottom-style: solid

Remove border sides

These examples start with a 4px border; the named sides are removed.

.border-top-noneborder-top-width: 0px · border-top-style: none

.border-right-noneborder-right-width: 0px · border-right-style: none

.border-bottom-noneborder-bottom-width: 0px · border-bottom-style: none

.border-left-noneborder-left-width: 0px · border-left-style: none

.border-x-noneborder-right-width: 0px · border-left-width: 0px · border-right-style: none · border-left-style: none

.border-y-noneborder-top-width: 0px · border-bottom-width: 0px · border-top-style: none · border-bottom-style: none

NextBentoExplore bento classes and how to use them.