Border Style

Utilities for controlling the style of an element's borders.

❗ Keep in mind

To establish borders, it's essential to commence class declarations with border.

This action defines a default solid border of 1px rgba(var(--cds-sys-color-stroke), var(--cds-sys-stroke-opacity)) for the element. Subsequently, varying border styles can be implemented by assigning classes as outlined on this page.

Class Name	CSS Equivalent
.border-none	border-style: none;
.border-b-none	border-block-style: none;
.border-i-none	border-inline-style: none;
.border-bs-none	border-block-start-style: none;
.border-be-none	border-block-end-style: none;
.border-is-none	border-inline-start-style: none;
.border-ie-none	border-inline-end-style: none;
.border-hidden	border-style: hidden;
.border-b-hidden	border-block-style: hidden;
.border-i-hidden	border-inline-style: hidden;
.border-bs-hidden	border-block-start-style: hidden;
.border-be-hidden	border-block-end-style: hidden;
.border-is-hidden	border-inline-start-style: hidden;
.border-ie-hidden	border-inline-end-style: hidden;
.border-dashed	border-style: dashed;
.border-b-dashed	border-block-style: dashed;
.border-i-dashed	border-inline-style: dashed;
.border-bs-dashed	border-block-start-style: dashed;
.border-be-dashed	border-block-end-style: dashed;
.border-is-dashed	border-inline-start-style: dashed;
.border-ie-dashed	border-inline-end-style: dashed;
.border-solid	border-style: solid;
.border-b-solid	border-block-style: solid;
.border-i-solid	border-inline-style: solid;
.border-bs-solid	border-block-start-style: solid;
.border-be-solid	border-block-end-style: solid;
.border-is-solid	border-inline-start-style: solid;
.border-ie-solid	border-inline-end-style: solid;
.border-dotted	border-style: dotted;
.border-b-dotted	border-block-style: dotted;
.border-i-dotted	border-inline-style: dotted;
.border-bs-dotted	border-block-start-style: dotted;
.border-be-dotted	border-block-end-style: dotted;
.border-is-dotted	border-inline-start-style: dotted;
.border-ie-dotted	border-inline-end-style: dotted;
.border-double	border-style: double;
.border-b-double	border-block-style: double;
.border-i-double	border-inline-style: double;
.border-bs-double	border-block-start-style: double;
.border-be-double	border-block-end-style: double;
.border-is-double	border-inline-start-style: double;
.border-ie-double	border-inline-end-style: double;
.border-groove	border-style: groove;
.border-b-groove	border-block-style: groove;
.border-i-groove	border-inline-style: groove;
.border-bs-groove	border-block-start-style: groove;
.border-be-groove	border-block-end-style: groove;
.border-is-groove	border-inline-start-style: groove;
.border-ie-groove	border-inline-end-style: groove;
.border-inset	border-style: inset;
.border-b-inset	border-block-style: inset;
.border-i-inset	border-inline-style: inset;
.border-bs-inset	border-block-start-style: inset;
.border-be-inset	border-block-end-style: inset;
.border-is-inset	border-inline-start-style: inset;
.border-ie-inset	border-inline-end-style: inset;
.border-outset	border-style: outset;
.border-b-outset	border-block-style: outset;
.border-i-outset	border-inline-style: outset;
.border-bs-outset	border-block-start-style: outset;
.border-be-outset	border-block-end-style: outset;
.border-is-outset	border-inline-start-style: outset;
.border-ie-outset	border-inline-end-style: outset;
.border-ridge	border-style: ridge;
.border-b-ridge	border-block-style: ridge;
.border-i-ridge	border-inline-style: ridge;
.border-bs-ridge	border-block-start-style: ridge;
.border-be-ridge	border-block-end-style: ridge;
.border-is-ridge	border-inline-start-style: ridge;
.border-ie-ridge	border-inline-end-style: ridge;

Setting the border style on all sides

Use border-{style} to control an element’s border style.

border-solid

border-dashed

border-dotted

border-double

<div class="[...] border border-solid">border-solid</div>
<div class="[...] border border-dashed">border-dashed</div>
<div class="[...] border border-dotted">border-dotted</div>
<div class="[...] border border-double">border-double</div>

Setting border style on individual sides

Use the border-{i|b}?{e|s}?-{style} utilities to set the border style on the vertical or horizontal sides (based on the text direction) of an element at the same time.

💡 Tip

In our development practices, we aim to avoid the use of physical properties such as top, bottom, right, and left. Instead, we advocate for the use of logical properties: {block|inline}-{end|start}. To enhance your understanding of these logical properties, we recommend visiting the Foundation/Logical Properties page.

Abbriviation
b	block (default vertical axis)
i	inline (default horizontal axis)
s	start (top for block, left for inline)
e	end (bottom for block, right for inline)

As an illustration, consider using the class border-bs-dotted to apply a dotted border-style on the top side (inline-end) of the element, based on the text direction.

Similarly, the class border-ie-dashed will add a dashed border-style on the right side (inline-end) of the element, depending on its text direction.

border-i-dashed

border-ie-double

border-is-dotted

border-b-ridge

border-be-inset

border-bs-solid

border-b-dashed,border-is-inset, border-idouble-2

<div class="[...] border-i-dashed">border-i-dashed</div>
<div class="[...] border-ie-double">border-ie-double<div>
<div class="[...] border-is-dotted">border-is-dotted</dv>
<div class="[...] border-b-ridge">border-b-ridge</di>
<div class="[...] border-be-inset">border-be-inset<div>
<div class="[...] border-bs-solid">border-bs-solid</dv>
<div class="[...] border-b-dashed border-is-inset borer-ie-double">border-b-dashed,border-is-inset, border-idouble-2</div>