Border Color

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

Class Name	CSS Equivalent
border	border-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-b	border-block-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-i	border-inline-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-bs	border-block-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-be	border-block-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-is	border-inline-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-ie	border-inline-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-transparent	border-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-b-transparent	border-block-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-i-transparent	border-inline-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-bs-transparent	border-block-start-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-be-transparent	border-block-end-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-is-transparent	border-inline-start-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-ie-transparent	border-inline-end-color: rgba(var(--cds-sys-color-transparent), var(--cds-sys-border-opacity);
border-primary	border-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-b-primary	border-block-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-i-primary	border-inline-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-bs-primary	border-block-start-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-be-primary	border-block-end-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-is-primary	border-inline-start-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-ie-primary	border-inline-end-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-border-opacity);
border-on-primary	border-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-b-on-primary	border-block-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-i-on-primary	border-inline-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-bs-on-primary	border-block-start-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-be-on-primary	border-block-end-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-is-on-primary	border-inline-start-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-ie-on-primary	border-inline-end-color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-border-opacity);
border-on-primary-container	border-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-b-on-primary-container	border-block-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-i-on-primary-container	border-inline-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-bs-on-primary-container	border-block-start-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-be-on-primary-container	border-block-end-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-is-on-primary-container	border-inline-start-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-ie-on-primary-container	border-inline-end-color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-border-opacity);
border-secondary	border-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-b-secondary	border-block-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-i-secondary	border-inline-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-bs-secondary	border-block-start-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-be-secondary	border-block-end-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-is-secondary	border-inline-start-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-ie-secondary	border-inline-end-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-border-opacity);
border-on-secondary	border-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-b-on-secondary	border-block-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-i-on-secondary	border-inline-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-bs-on-secondary	border-block-start-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-be-on-secondary	border-block-end-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-is-on-secondary	border-inline-start-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-ie-on-secondary	border-inline-end-color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-border-opacity);
border-on-secondary-container	border-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-b-on-secondary-container	border-block-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-i-on-secondary-container	border-inline-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-bs-on-secondary-container	border-block-start-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-be-on-secondary-container	border-block-end-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-is-on-secondary-container	border-inline-start-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-ie-on-secondary-container	border-inline-end-color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-border-opacity);
border-error	border-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-b-error	border-block-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-i-error	border-inline-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-bs-error	border-block-start-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-be-error	border-block-end-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-is-error	border-inline-start-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-ie-error	border-inline-end-color: rgba(var(--cds-sys-color-error), var(--cds-sys-border-opacity);
border-on-error	border-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-b-on-error	border-block-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-i-on-error	border-inline-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-bs-on-error	border-block-start-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-be-on-error	border-block-end-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-is-on-error	border-inline-start-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-ie-on-error	border-inline-end-color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-border-opacity);
border-on-error-container	border-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-b-on-error-container	border-block-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-i-on-error-container	border-inline-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-bs-on-error-container	border-block-start-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-be-on-error-container	border-block-end-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-is-on-error-container	border-inline-start-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-ie-on-error-container	border-inline-end-color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-border-opacity);
border-warn	border-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-b-warn	border-block-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-i-warn	border-inline-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-bs-warn	border-block-start-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-be-warn	border-block-end-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-is-warn	border-inline-start-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-ie-warn	border-inline-end-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-border-opacity);
border-on-warn	border-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-b-on-warn	border-block-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-i-on-warn	border-inline-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-bs-on-warn	border-block-start-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-be-on-warn	border-block-end-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-is-on-warn	border-inline-start-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-ie-on-warn	border-inline-end-color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-border-opacity);
border-on-warn-container	border-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-b-on-warn-container	border-block-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-i-on-warn-container	border-inline-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-bs-on-warn-container	border-block-start-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-be-on-warn-container	border-block-end-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-is-on-warn-container	border-inline-start-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-ie-on-warn-container	border-inline-end-color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-border-opacity);
border-success	border-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-b-success	border-block-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-i-success	border-inline-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-bs-success	border-block-start-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-be-success	border-block-end-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-is-success	border-inline-start-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-ie-success	border-inline-end-color: rgba(var(--cds-sys-color-success), var(--cds-sys-border-opacity);
border-on-success	border-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-b-on-success	border-block-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-i-on-success	border-inline-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-bs-on-success	border-block-start-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-be-on-success	border-block-end-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-is-on-success	border-inline-start-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-ie-on-success	border-inline-end-color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-border-opacity);
border-on-success-container	border-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-b-on-success-container	border-block-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-i-on-success-container	border-inline-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-bs-on-success-container	border-block-start-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-be-on-success-container	border-block-end-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-is-on-success-container	border-inline-start-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-ie-on-success-container	border-inline-end-color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-border-opacity);
border-excellent	border-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-b-excellent	border-block-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-i-excellent	border-inline-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-bs-excellent	border-block-start-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-be-excellent	border-block-end-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-is-excellent	border-inline-start-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-ie-excellent	border-inline-end-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-border-opacity);
border-on-excellent	border-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-b-on-excellent	border-block-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-i-on-excellent	border-inline-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-bs-on-excellent	border-block-start-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-be-on-excellent	border-block-end-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-is-on-excellent	border-inline-start-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-ie-on-excellent	border-inline-end-color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-border-opacity);
border-on-excellent-container	border-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-b-on-excellent-container	border-block-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-i-on-excellent-container	border-inline-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-bs-on-excellent-container	border-block-start-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-be-on-excellent-container	border-block-end-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-is-on-excellent-container	border-inline-start-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-ie-on-excellent-container	border-inline-end-color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-border-opacity);
border-on-surface	border-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-b-on-surface	border-block-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-i-on-surface	border-inline-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-bs-on-surface	border-block-start-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-be-on-surface	border-block-end-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-is-on-surface	border-inline-start-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-ie-on-surface	border-inline-end-color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-border-opacity);
border-on-surface-variant	border-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-b-on-surface-variant	border-block-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-i-on-surface-variant	border-inline-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-bs-on-surface-variant	border-block-start-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-be-on-surface-variant	border-block-end-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-is-on-surface-variant	border-inline-start-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-ie-on-surface-variant	border-inline-end-color: rgba(var(--cds-sys-color-on-surface-variant), var(--cds-sys-border-opacity);
border-stroke	border-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-b-stroke	border-block-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-i-stroke	border-inline-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-bs-stroke	border-block-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-be-stroke	border-block-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-is-stroke	border-inline-start-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-ie-stroke	border-inline-end-color: rgba(var(--cds-sys-color-stroke), var(--cds-sys-border-opacity);
border-stroke-variant	border-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-b-stroke-variant	border-block-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-i-stroke-variant	border-inline-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-bs-stroke-variant	border-block-start-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-be-stroke-variant	border-block-end-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-is-stroke-variant	border-inline-start-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);
border-ie-stroke-variant	border-inline-end-color: rgba(var(--cds-sys-color-stroke-variant), var(--cds-sys-border-opacity);

Setting the border color

Control the border color of an element using the border-{color} utilities.

Email*

This field is required.

<input class="[...] border border-2 border-error" />

Setting the border-color on individual sides

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

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

border-i-primary

border-ie-secondary

border-is-on-surface

border-b-error

border-be-success

border-bs-stroke

border-b-stroke-variant, border-is-error, border-ie-success

<div class="[...] border border-i-primary">border-i-primary</div>
<div class="[...] border border-ie-secondary">border-ie-secondary</div>
<div class="[...] border border-is-on-surface">border-is-on-surface</div>

<div class="[...] border border-b-error">border-b-error</div>
<div class="[...] border border-be-success">border-be-success</div>
<div class="[...] border border-bs-stroke">border-bs-stroke</div>

<div class="[...] border border-b-stroke-variant border-is-error border-ie-success">
  border-b-stroke-variant, border-is-error, border-ie-success
</div>

Changing the opacity

Control the opacity of an element’s border color using the border-opacity-{name} classes.

For the full list of classes to apply border-opacity, see: Styles/Utilities/Effects/Opacity.