Borders

Separating content

Use the border for underlining or to separate content sections where backgrounds doesn’t fit. Try avoiding framing content using borders.

Default

Combine bb and mb-border to get the default border.

.mb-border { border-width: 2px; border-color: hsl(0, 0%, 80%) }

.bb { border-bottom-style: solid; }

Other utilities

Use these in cases where the default is not sufficient. Usually for overrides and customisation.

.bl { border-left-style: solid; }

.br { border-right-style: solid; }

.bt { border-top-style: solid; }

.ba { border-style: solid; }

.bn { border-style: none; border-width: 0; }

.b--gray4 { border-color: #dddddd; }

.b--white { border-color: #ffffff; }

.bw0 { border-width: 0; }

.bw1 { border-width: 1px; }

.bw2 { border-width: 2px; }

Horizontal rule

Adding these utilities to the correct HTML elements is mostly the best way to create borders. But sometimes the <hr> element can be handy. It looks like this:

But note that it is semantically intended for “a thematic break” between paragraphs.