Border

Utilities for controlling the width 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 widths can be implemented by assigning classes as outlined on this page

Class Name	CSS Equivalent
.border-0	border-width: 0px;
.border-b-0	border-block-width: 0px;
.border-i-0	border-inline-width: 0px;
.border-bs-0	border-block-start-width: 0px;
.border-be-0	border-block-end-width: 0px;
.border-is-0	border-inline-start-width: 0px;
.border-ie-0	border-inline-end-width: 0px;
.border-1	border-width: 1px;
.border-b-1	border-block-width: 1px;
.border-i-1	border-inline-width: 1px;
.border-bs-1	border-block-start-width: 1px;
.border-be-1	border-block-end-width: 1px;
.border-is-1	border-inline-start-width: 1px;
.border-ie-1	border-inline-end-width: 1px;
.border-2	border-width: 2px;
.border-b-2	border-block-width: 2px;
.border-i-2	border-inline-width: 2px;
.border-bs-2	border-block-start-width: 2px;
.border-be-2	border-block-end-width: 2px;
.border-is-2	border-inline-start-width: 2px;
.border-ie-2	border-inline-end-width: 2px;
.border-3	border-width: 3px;
.border-b-3	border-block-width: 3px;
.border-i-3	border-inline-width: 3px;
.border-bs-3	border-block-start-width: 3px;
.border-be-3	border-block-end-width: 3px;
.border-is-3	border-inline-start-width: 3px;
.border-ie-3	border-inline-end-width: 3px;
.border-4	border-width: 4px;
.border-b-4	border-block-width: 4px;
.border-i-4	border-inline-width: 4px;
.border-bs-4	border-block-start-width: 4px;
.border-be-4	border-block-end-width: 4px;
.border-is-4	border-inline-start-width: 4px;
.border-ie-4	border-inline-end-width: 4px;
.border-5	border-width: 5px;
.border-b-5	border-block-width: 5px;
.border-i-5	border-inline-width: 5px;
.border-bs-5	border-block-start-width: 5px;
.border-be-5	border-block-end-width: 5px;
.border-is-5	border-inline-start-width: 5px;
.border-ie-5	border-inline-end-width: 5px;
.border-6	border-width: 6px;
.border-b-6	border-block-width: 6px;
.border-i-6	border-inline-width: 6px;
.border-bs-6	border-block-start-width: 6px;
.border-be-6	border-block-end-width: 6px;
.border-is-6	border-inline-start-width: 6px;
.border-ie-6	border-inline-end-width: 6px;
.border-7	border-width: 7px;
.border-b-7	border-block-width: 7px;
.border-i-7	border-inline-width: 7px;
.border-bs-7	border-block-start-width: 7px;
.border-be-7	border-block-end-width: 7px;
.border-is-7	border-inline-start-width: 7px;
.border-ie-7	border-inline-end-width: 7px;
.border-8	border-width: 8px;
.border-b-8	border-block-width: 8px;
.border-i-8	border-inline-width: 8px;
.border-bs-8	border-block-start-width: 8px;
.border-be-8	border-block-end-width: 8px;
.border-is-8	border-inline-start-width: 8px;
.border-ie-8	border-inline-end-width: 8px;
.border-9	border-width: 9px;
.border-b-9	border-block-width: 9px;
.border-i-9	border-inline-width: 9px;
.border-bs-9	border-block-start-width: 9px;
.border-be-9	border-block-end-width: 9px;
.border-is-9	border-inline-start-width: 9px;
.border-ie-9	border-inline-end-width: 9px;
.border-10	border-width: 10px;
.border-b-10	border-block-width: 10px;
.border-i-10	border-inline-width: 10px;
.border-bs-10	border-block-start-width: 10px;
.border-be-10	border-block-end-width: 10px;
.border-is-10	border-inline-start-width: 10px;
.border-ie-10	border-inline-end-width: 10px;
.border-11	border-width: 11px;
.border-b-11	border-block-width: 11px;
.border-i-11	border-inline-width: 11px;
.border-bs-11	border-block-start-width: 11px;
.border-be-11	border-block-end-width: 11px;
.border-is-11	border-inline-start-width: 11px;
.border-ie-11	border-inline-end-width: 11px;
.border-12	border-width: 12px;
.border-b-12	border-block-width: 12px;
.border-i-12	border-inline-width: 12px;
.border-bs-12	border-block-start-width: 12px;
.border-be-12	border-block-end-width: 12px;
.border-is-12	border-inline-start-width: 12px;
.border-ie-12	border-inline-end-width: 12px;

Setting width on all sides

Use the border, border-{width} utilities to set the border width for all sides of an element.

border-4

border-7

border-10

Setting width on individual sides

Use the border-{i|b}?{e|s}?-{width} utilities to set the border width 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-4 to apply a border-width of 4px on the top side (inline-end) of the element, based on the text direction.

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

border-i-4

border-ie-7

border-is-10

border-b-4

border-be-8

border-bs-2

border-b-5,border-is-10, border-ie-2

<div class="[...] border border-i-4">border-i-4</div>
<div class="[...] border border-ie-7">border-ie-7</div>
<div class="[...] border border-is-10">border-is-10</div>

<div class="[...] border border-b-4">border-b-4</div>
<div class="[...] border border-be-8">border-be-8</div>
<div class="[...] border border-bs-2">border-bs-2</div>

<div class="[...] border border-0 border-b-5 border-is-10 border-ie-2 "> border-b-5,border-is-10, border-ie-2 </div>