Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

BorderLink to this section: Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

AdditiveLink to this section: Additive

Add borders to custom elements:

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

html

SubtractiveLink to this section: Subtractive

Or remove borders:

<span class="border border-none"></span>
<span class="border border-top-none"></span>
<span class="border border-end-none"></span>
<span class="border border-bottom-none"></span>
<span class="border border-start-none"></span>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

html

ColorLink to this section: Color

Change the border color using utilities. The color utilities are generated from our $ouds-border-colors Sass map.

<span class="border border-brand-primary"></span>
<span class="border border-default"></span>
<span class="border border-emphasized"></span>
<span class="border border-muted"></span>
<div data-bs-theme="light" class="bg-brand-primary d-inline-flex m-2xs p-xs"><span class="border border-on-brand-primary m-none bg-brand-primary" data-bs-theme="light"></span></div>
<div data-bs-theme="light" class="bg-always-white d-inline-flex m-2xs p-xs"><span class="border border-always-black m-none bg-always-white" data-bs-theme="light"></span></div>
<div data-bs-theme="dark" class="bg-always-black d-inline-flex m-2xs p-xs"><span class="border border-always-white m-none bg-always-black" data-bs-theme="dark"></span></div>
<div data-bs-theme="dark" class="bg-always-black d-inline-flex m-2xs p-xs"><span class="border border-always-on-black m-none bg-always-black" data-bs-theme="dark"></span></div>
<div data-bs-theme="light" class="bg-always-white d-inline-flex m-2xs p-xs"><span class="border border-always-on-white m-none bg-always-white" data-bs-theme="light"></span></div>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Border utilities like .border-* that generated from our original $theme-colors Sass map don’t yet respond to color modes, however, any .border-*-subtle utility will. This will be resolved in Bootstrap v6.

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

html

Or modify the default border-color of a component:

Email address

Dangerous heading

Changing border color and width

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com" />
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 text-bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

html

WidthLink to this section: Width

<span class="border border-none"></span>
<span class="border border-thin"></span>
<span class="border border-medium"></span>
<span class="border border-thick"></span>
<span class="border border-thicker"></span>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

<span class="border border-0"></span>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

html

RadiusLink to this section: Radius

Add classes to an element to easily round its corners.

<img src="..." class="rounded-large" alt="..." />
<img src="..." class="rounded-top-large" alt="..." />
<img src="..." class="rounded-end-large" alt="..." />
<img src="..." class="rounded-bottom-large" alt="..." />
<img src="..." class="rounded-start-large" alt="..." />

html

SizesLink to this section: Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes are none, short, medium, tall, circle and pill, and can be configured by modifying the utilities API.

The .rounded class is mapped to the "default" border radius design token. In Orange brand, the value for this token is zero, explaining why the .rounded class does not apply any border radius here.

<img src="..." class="rounded" alt="..." />
<img src="..." class="rounded-none" alt="..." />
<img src="..." class="rounded-small" alt="..." />
<img src="..." class="rounded-medium" alt="..." />
<img src="..." class="rounded-large" alt="..." />
<img src="..." class="rounded-circle" alt="..." />
<img src="..." class="rounded-pill" alt="..." />

html

<img src="..." class="rounded-bottom-small" alt="..." />
<img src="..." class="rounded-start-medium" alt="..." />
<img src="..." class="rounded-end-circle" alt="..." />
<img src="..." class="rounded-start-pill" alt="..." />
<img src="..." class="rounded-large rounded-top-none" alt="..." />

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5, and can be configured by modifying the utilities API.

<img src="..." class="rounded-0" alt="..." />
<img src="..." class="rounded-1" alt="..." />
<img src="..." class="rounded-2" alt="..." />
<img src="..." class="rounded-3" alt="..." />
<img src="..." class="rounded-4" alt="..." />
<img src="..." class="rounded-5" alt="..." />

html

<img src="..." class="rounded-bottom-1" alt="..." />
<img src="..." class="rounded-start-2" alt="..." />
<img src="..." class="rounded-end-circle" alt="..." />
<img src="..." class="rounded-start-pill" alt="..." />
<img src="..." class="rounded-5 rounded-top-0" alt="..." />

html

Drag and dropLink to this section: Drag and drop

Use the .border-drag utility to apply the border style for a drop zone.

This utility must not be used in any other context than drag and drop.

<span class="border border-drag"></span>

html

CSSLink to this section: CSS

VariablesLink to this section: Variables

scss/_root.scss

--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
@if $enable-bootstrap-compatibility {
  --#{$prefix}border-color-translucent: #{$border-color-translucent};
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

scss/_root.scss

@if $enable-bootstrap-compatibility {
  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
}

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Border semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

$ouds-border-radius-default: $core-ouds-border-radius-0;
$ouds-border-radius-large: $core-ouds-border-radius-300;
$ouds-border-radius-medium: $core-ouds-border-radius-150;
$ouds-border-radius-none: $core-ouds-border-radius-0;
$ouds-border-radius-pill: $core-ouds-border-radius-9999;
$ouds-border-radius-small: $core-ouds-border-radius-75;
$ouds-border-style-default: $core-ouds-border-style-solid;
$ouds-border-style-drag: $core-ouds-border-style-dashed;
$ouds-border-width-default: $core-ouds-border-width-25;
$ouds-border-width-focus: $core-ouds-border-width-125;
$ouds-border-width-focus-inset: $core-ouds-border-width-50;
$ouds-border-width-medium: $core-ouds-border-width-50;
$ouds-border-width-none: $core-ouds-border-width-0;
$ouds-border-width-thick: $core-ouds-border-width-75;
$ouds-border-width-thicker: $core-ouds-border-width-100;
$ouds-border-width-thin: $core-ouds-border-width-25;

Color semantic tokens as Sass variables. Should not be used as-is. Prefer use our CSS semantic tokens.

scss/tokens/_semantic.scss

$ouds-color-action-disabled-dark: $core-ouds-color-opacity-white-200;
$ouds-color-action-disabled-light: $core-ouds-color-opacity-black-200;
$ouds-color-action-enabled-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-action-enabled-light: $core-ouds-color-functional-black;
$ouds-color-action-focus-dark: $core-ouds-color-opacity-white-640;
$ouds-color-action-focus-light: $core-ouds-color-opacity-black-680;
$ouds-color-action-highlighted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-action-highlighted-light: $core-ouds-color-functional-black;
$ouds-color-action-hover-dark: $core-ouds-color-opacity-white-640;
$ouds-color-action-hover-light: $core-ouds-color-opacity-black-680;
$ouds-color-action-loading-dark: $core-orange-color-orange-500;
$ouds-color-action-loading-light: $core-orange-color-orange-550;
$ouds-color-action-negative-enabled-dark: $core-ouds-color-functional-scarlet-300;
$ouds-color-action-negative-enabled-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-action-negative-focus-dark: $core-ouds-color-functional-scarlet-200;
$ouds-color-action-negative-focus-light: $core-ouds-color-functional-scarlet-700;
$ouds-color-action-negative-hover-dark: $core-ouds-color-functional-scarlet-200;
$ouds-color-action-negative-hover-light: $core-ouds-color-functional-scarlet-700;
$ouds-color-action-negative-loading-dark: $core-ouds-color-functional-scarlet-100;
$ouds-color-action-negative-loading-light: $core-ouds-color-functional-scarlet-800;
$ouds-color-action-negative-pressed-dark: $core-ouds-color-functional-scarlet-100;
$ouds-color-action-negative-pressed-light: $core-ouds-color-functional-scarlet-800;
$ouds-color-action-pressed-dark: $core-orange-color-orange-500;
$ouds-color-action-pressed-light: $core-orange-color-orange-550;
$ouds-color-action-selected-dark: $core-orange-color-orange-500;
$ouds-color-action-selected-light: $core-orange-color-orange-550;
$ouds-color-action-support-enabled-dark: $core-ouds-color-opacity-white-40;
$ouds-color-action-support-enabled-light: $core-ouds-color-opacity-black-40;
$ouds-color-action-support-focus-dark: $core-ouds-color-opacity-white-80;
$ouds-color-action-support-focus-light: $core-ouds-color-opacity-black-80;
$ouds-color-action-support-hover-dark: $core-ouds-color-opacity-white-80;
$ouds-color-action-support-hover-light: $core-ouds-color-opacity-black-80;
$ouds-color-action-support-loading-dark: $core-ouds-color-opacity-white-120;
$ouds-color-action-support-loading-light: $core-ouds-color-opacity-black-120;
$ouds-color-action-support-pressed-dark: $core-ouds-color-opacity-white-120;
$ouds-color-action-support-pressed-light: $core-ouds-color-opacity-black-120;
$ouds-color-action-visited-dark: $core-orange-color-decorative-amethyst-400;
$ouds-color-action-visited-light: $core-orange-color-decorative-amethyst-600;
$ouds-color-always-black: $core-ouds-color-functional-black;
$ouds-color-always-on-black: $core-ouds-color-functional-gray-light-160;
$ouds-color-always-on-white: $core-ouds-color-functional-black;
$ouds-color-always-white: $core-ouds-color-functional-white;
$ouds-color-bg-emphasized-dark: $core-ouds-color-functional-gray-dark-640;
$ouds-color-bg-emphasized-light: $core-ouds-color-functional-gray-dark-880;
$ouds-color-bg-primary-dark: $core-ouds-color-functional-gray-dark-880;
$ouds-color-bg-primary-light: $core-ouds-color-functional-white;
$ouds-color-bg-secondary-dark: $core-ouds-color-functional-gray-dark-800;
$ouds-color-bg-secondary-light: $core-ouds-color-functional-gray-light-80;
$ouds-color-bg-tertiary-dark: $core-orange-color-warm-gray-1000;
$ouds-color-bg-tertiary-light: $core-orange-color-warm-gray-100;
$ouds-color-border-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-border-brand-primary-light: $core-orange-color-orange-550;
$ouds-color-border-default-dark: $core-ouds-color-opacity-white-200;
$ouds-color-border-default-light: $core-ouds-color-opacity-black-200;
$ouds-color-border-emphasized-dark: $core-ouds-color-opacity-white-920;
$ouds-color-border-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-border-focus-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-border-focus-inset-dark: $core-ouds-color-functional-gray-dark-880;
$ouds-color-border-focus-inset-light: $core-ouds-color-functional-white;
$ouds-color-border-focus-light: $core-ouds-color-functional-black;
$ouds-color-border-muted-dark: $core-ouds-color-opacity-white-80;
$ouds-color-border-muted-light: $core-ouds-color-opacity-black-80;
$ouds-color-border-on-brand-primary-dark: $core-ouds-color-functional-black;
$ouds-color-border-on-brand-primary-light: $core-ouds-color-functional-black;
$ouds-color-content-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-content-brand-primary-light: $core-orange-color-orange-550; // Test for support Figma
$ouds-color-content-default-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-default-light: $core-ouds-color-functional-black;
$ouds-color-content-disabled-dark: $core-ouds-color-opacity-white-200;
$ouds-color-content-disabled-light: $core-ouds-color-opacity-black-200;
$ouds-color-content-muted-dark: $core-ouds-color-opacity-white-640;
$ouds-color-content-muted-light: $core-ouds-color-opacity-black-680;
$ouds-color-content-on-action-disabled-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-disabled-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-enabled-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-enabled-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-focus-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-focus-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-highlighted-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-highlighted-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-hover-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-hover-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-loading-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-loading-light: $core-ouds-color-functional-white;
$ouds-color-content-on-action-pressed-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-action-pressed-light: $core-ouds-color-functional-white;
$ouds-color-content-on-brand-primary-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-brand-primary-light: $core-ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-accent-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-accent-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-accent-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-accent-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-info-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-info-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-negative-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-negative-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-negative-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-negative-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-neutral-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-neutral-emphasized-light: $core-ouds-color-functional-white;
$ouds-color-content-on-status-neutral-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-neutral-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-positive-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-positive-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-emphasized-dark: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-emphasized-light: $core-ouds-color-functional-black;
$ouds-color-content-on-status-warning-muted-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-content-on-status-warning-muted-light: $core-ouds-color-functional-black;
$ouds-color-content-status-accent-dark: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-accent-light: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-dark: $core-ouds-color-functional-scarlet-600;
$ouds-color-content-status-negative-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-dark: $core-ouds-color-functional-malachite-500;
$ouds-color-content-status-positive-light: $core-ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-dark: $core-ouds-color-functional-sun-500;
$ouds-color-content-status-warning-light: $core-ouds-color-functional-sun-500;
$ouds-color-decorative-accent-1-default: $core-orange-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized: $core-orange-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted: $core-orange-color-decorative-emerald-200;
$ouds-color-decorative-accent-2-default: $core-orange-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized: $core-orange-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted: $core-orange-color-decorative-sky-200;
$ouds-color-decorative-accent-3-default: $core-ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized: $core-orange-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted: $core-ouds-color-functional-sun-200;
$ouds-color-decorative-accent-4-default: $core-orange-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized: $core-orange-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted: $core-orange-color-decorative-amethyst-200;
$ouds-color-decorative-accent-5-default: $core-orange-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized: $core-orange-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted: $core-orange-color-decorative-shocking-pink-100;
$ouds-color-decorative-brand-primary: $core-orange-color-orange-500;
$ouds-color-decorative-brand-secondary: $core-ouds-color-functional-black;
$ouds-color-decorative-brand-tertiary: $core-ouds-color-functional-white;
$ouds-color-decorative-neutral-emphasized-higher: $core-ouds-color-functional-gray-dark-640;
$ouds-color-decorative-neutral-emphasized-low: $core-ouds-color-functional-gray-dark-400;
$ouds-color-decorative-neutral-emphasized-lower: $core-ouds-color-functional-gray-dark-320;
$ouds-color-decorative-neutral-emphasized-lowest: $core-ouds-color-functional-gray-dark-240;
$ouds-color-decorative-neutral-muted-high: $core-ouds-color-functional-gray-light-400;
$ouds-color-decorative-neutral-muted-higher: $core-ouds-color-functional-gray-light-800;
$ouds-color-decorative-neutral-muted-highest: $core-ouds-color-functional-gray-light-960;
$ouds-color-decorative-neutral-muted-low: $core-ouds-color-functional-gray-light-240;
$ouds-color-decorative-neutral-muted-lower: $core-ouds-color-functional-gray-light-160;
$ouds-color-decorative-neutral-muted-lowest: $core-ouds-color-functional-gray-light-80;
$ouds-color-decorative-neutral-muted-medium: $core-ouds-color-functional-gray-light-320;
$ouds-color-decorative-skin-tint-100: $core-orange-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200: $core-orange-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300: $core-orange-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400: $core-orange-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500: $core-orange-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600: $core-orange-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700: $core-orange-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800: $core-orange-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900: $core-orange-color-decorative-deep-peach-900;
$ouds-color-opacity-lower-dark: $core-ouds-color-opacity-white-80;
$ouds-color-opacity-lower-light: $core-ouds-color-opacity-black-80;
$ouds-color-opacity-lowest-dark: $core-ouds-color-opacity-white-40;
$ouds-color-opacity-lowest-light: $core-ouds-color-opacity-black-40;
$ouds-color-opacity-transparent-dark: $core-ouds-color-opacity-white-0;
$ouds-color-opacity-transparent-light: $core-ouds-color-opacity-black-0;
$ouds-color-overlay-default-dark: $core-ouds-color-opacity-white-80;
$ouds-color-overlay-default-light: $core-ouds-color-functional-white;
$ouds-color-overlay-drag-dark: $core-ouds-color-opacity-white-200;
$ouds-color-overlay-drag-light: $core-ouds-color-opacity-black-40;
$ouds-color-overlay-emphasized-dark: $core-ouds-color-functional-gray-light-160;
$ouds-color-overlay-emphasized-light: $core-ouds-color-functional-gray-dark-720;
$ouds-color-surface-brand-primary-dark: $core-orange-color-orange-500;
$ouds-color-surface-brand-primary-light: $core-orange-color-orange-500;
$ouds-color-surface-status-accent-emphasized-dark: $core-ouds-color-functional-sun-300;
$ouds-color-surface-status-accent-emphasized-light: $core-ouds-color-functional-sun-500;
$ouds-color-surface-status-accent-muted-dark: $core-orange-color-warm-gray-1000;
$ouds-color-surface-status-accent-muted-light: $core-orange-color-warm-gray-100;
$ouds-color-surface-status-info-emphasized-dark: $core-ouds-color-functional-dodger-blue-300;
$ouds-color-surface-status-info-emphasized-light: $core-ouds-color-functional-dodger-blue-500;
$ouds-color-surface-status-info-muted-dark: $core-ouds-color-functional-dodger-blue-900;
$ouds-color-surface-status-info-muted-light: $core-ouds-color-opacity-dodger-blue;
$ouds-color-surface-status-negative-emphasized-dark: $core-ouds-color-functional-scarlet-300;
$ouds-color-surface-status-negative-emphasized-light: $core-ouds-color-functional-scarlet-600;
$ouds-color-surface-status-negative-muted-dark: $core-ouds-color-functional-scarlet-900;
$ouds-color-surface-status-negative-muted-light: $core-ouds-color-opacity-scarlet;
$ouds-color-surface-status-neutral-emphasized-dark: $core-ouds-color-opacity-white-920;
$ouds-color-surface-status-neutral-emphasized-light: $core-ouds-color-opacity-black-840;
$ouds-color-surface-status-neutral-muted-dark: $core-ouds-color-opacity-white-80;
$ouds-color-surface-status-neutral-muted-light: $core-ouds-color-opacity-black-40;
$ouds-color-surface-status-positive-emphasized-dark: $core-ouds-color-functional-malachite-300;
$ouds-color-surface-status-positive-emphasized-light: $core-ouds-color-functional-malachite-500;
$ouds-color-surface-status-positive-muted-dark: $core-ouds-color-functional-malachite-900;
$ouds-color-surface-status-positive-muted-light: $core-ouds-color-opacity-malachite;
$ouds-color-surface-status-warning-emphasized-dark: $core-ouds-color-functional-sun-300;
$ouds-color-surface-status-warning-emphasized-light: $core-ouds-color-functional-sun-500;
$ouds-color-surface-status-warning-muted-dark: $core-ouds-color-functional-sun-900;
$ouds-color-surface-status-warning-muted-light: $core-ouds-color-opacity-sun;
$ouds-color-overlay-modal-dark: $ouds-color-bg-emphasized-dark;
$ouds-color-overlay-modal-light: $ouds-color-bg-primary-light;

CSS semantic tokensLink to this section: CSS semantic tokens

Color semantic tokens as CSS variables.

scss/tokens/_semantic-colors-custom-props.scss

@include color-mode(light, true) {
  --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light};
  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-light};
  --#{$prefix}color-action-focus: #{$ouds-color-action-focus-light};
  --#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-light};
  --#{$prefix}color-action-hover: #{$ouds-color-action-hover-light};
  --#{$prefix}color-action-loading: #{$ouds-color-action-loading-light};
  --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-light};
  --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-light};
  --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-light};
  --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-light};
  --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-light};
  --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-light};
  --#{$prefix}color-action-selected: #{$ouds-color-action-selected-light};
  --#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-light};
  --#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-light};
  --#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-light};
  --#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-light};
  --#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-light};
  --#{$prefix}color-action-visited: #{$ouds-color-action-visited-light};
  --#{$prefix}color-always-black: #{$ouds-color-always-black};
  --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black};
  --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white};
  --#{$prefix}color-always-white: #{$ouds-color-always-white};
  --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light};
  --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light};
  --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light};
  --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light};
  --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light};
  --#{$prefix}color-border-default: #{$ouds-color-border-default-light};
  --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light};
  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light};
  --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light};
  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-light};
  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
  --#{$prefix}color-content-default: #{$ouds-color-content-default-light};
  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light};
  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light};
  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light};
  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-light};
  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-light};
  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-light};
  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-light};
  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-light};
  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-light};
  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light};
  --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-light};
  --#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-light};
  --#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-light};
  --#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-light};
  --#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-light};
  --#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-light};
  --#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-light};
  --#{$prefix}color-content-on-status-neutral-emphasized: #{$ouds-color-content-on-status-neutral-emphasized-light};
  --#{$prefix}color-content-on-status-neutral-muted: #{$ouds-color-content-on-status-neutral-muted-light};
  --#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-light};
  --#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-light};
  --#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-light};
  --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light};
  --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light};
  --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light};
  --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light};
  --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light};
  --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light};
  --#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default};
  --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized};
  --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted};
  --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default};
  --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized};
  --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted};
  --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default};
  --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized};
  --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted};
  --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default};
  --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized};
  --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted};
  --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default};
  --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized};
  --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted};
  --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary};
  --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary};
  --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary};
  --#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher};
  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low};
  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower};
  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest};
  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high};
  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher};
  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest};
  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low};
  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower};
  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest};
  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium};
  --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100};
  --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200};
  --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300};
  --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400};
  --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500};
  --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600};
  --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700};
  --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800};
  --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900};
  --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light};
  --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light};
  --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light};
  --#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-light};
  --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light};
  --#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-light};
  --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light};
  --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light};
  --#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-light};
  --#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-light};
  --#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-light};
  --#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-light};
  --#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-light};
  --#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-light};
  --#{$prefix}color-surface-status-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-light};
  --#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-muted-light};
  --#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-light};
  --#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-light};
  --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light};
  --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light};
  --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default};
  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag};
  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized};
  --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none};
  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised};
  --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default};
  --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized};
  --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled};
}

The same happens for the dark mode by replacing -light by -dark.

Sass variablesLink to this section: Sass variables

scss/_variables.scss

$border-width:                $ouds-border-width-default; // OUDS mod: instead of `.125rem`
$border-widths: (
  1: $ouds-border-width-thin, // OUDS mod: instead of `$border-width * .5`
  2: $ouds-border-width-medium, // OUDS mod: instead of `$border-width`
  3: $ouds-border-width-thick, // OUDS mod: instead of `$border-width * 1.5`
  4: $ouds-border-width-thicker, // OUDS mod: instead of `$border-width * 2`
  5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5`
);
$border-style:                $ouds-border-style-default; // OUDS mod: instead of `solid`
$border-color:                $ouds-color-border-emphasized-light; // OUDS mod: instead of `$gray-300`
$border-color-translucent:    $ouds-color-border-default-light; // OUDS mod: instead of `rgba($black, .175)`

scss/_variables.scss

$border-radius:               $ouds-border-radius-default; // OUDS mod: instead of `.375rem`
$border-radius-sm:            $ouds-border-radius-small; // OUDS mod: instead of `.25rem`
$border-radius-lg:            $ouds-border-radius-medium; // OUDS mod: instead of `.5rem`
$border-radius-xl:            $ouds-border-radius-large; //OUDS mod: instead of `1rem`
$border-radius-xxl:           $ouds-border-radius-large * 1.5; // OUDS mod: instead of `2rem`
$border-radius-pill:          px-to-rem($ouds-border-radius-pill); // OUDS mod: instead of `50rem`

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Variables for setting border-color in .border-{direction}-subtle utilities in light and dark mode:

scss/_variables.scss

$primary-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($primary, 60%)`
$secondary-border-subtle: $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($secondary, 60%)`
$success-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($success, 60%)`
$info-border-subtle:      $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($info, 60%)`
$warning-border-subtle:   $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($warning, 60%)`
$danger-border-subtle:    $ouds-color-border-default-light; // OUDS mod: instead of `tint-color($danger, 60%)`
$light-border-subtle:     $ouds-color-border-default-light; // OUDS mod: instead of `$gray-200`
$dark-border-subtle:      $ouds-color-border-default-light; // OUDS mod: instead of `$gray-500`

scss/_variables-dark.scss

$primary-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($primary, 40%)`
$secondary-border-subtle-dark:      $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($secondary, 40%)`
$success-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($success, 40%)`
$info-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($info, 40%)`
$warning-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($warning, 40%)`
$danger-border-subtle-dark:         $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($danger, 40%)`
$light-border-subtle-dark:          $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-700`
$dark-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-800`

Sass mapsLink to this section: Sass maps

The border utilities are declared through this map and generated using our utilities API.

scss/_maps.scss

$ouds-border-radiuses: (
  null:       $ouds-border-radius-default,
  "none":     $ouds-border-radius-none,
  "small":    $ouds-border-radius-small,
  "medium":   $ouds-border-radius-medium,
  "large":     $ouds-border-radius-large,
  "pill":     px-to-rem($ouds-border-radius-pill),
  "circle":   50%
);

$ouds-border-styles: (
  "drag":     $ouds-border-style-drag
);

$ouds-border-widths: (
  "thin":     $ouds-border-width-thin,
  "medium":   $ouds-border-width-medium,
  "thick":    $ouds-border-width-thick,
  "thicker":  $ouds-border-width-thicker,
);

$ouds-border-colors: (
  "brand-primary": var(--#{$prefix}color-border-brand-primary),
  "default": var(--#{$prefix}color-border-default),
  "emphasized": var(--#{$prefix}color-border-emphasized),
  "muted": var(--#{$prefix}color-border-muted),
  "on-brand-primary": var(--#{$prefix}color-border-on-brand-primary),
  "always-black": var(--#{$prefix}color-always-black),
  "always-white": var(--#{$prefix}color-always-white),
  "always-on-black": var(--#{$prefix}color-always-on-black),
  "always-on-white": var(--#{$prefix}color-always-on-white),
);

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Color mode adaptive border colors are also available as a Sass map:

scss/_maps.scss

$theme-colors-border-subtle: (
  "primary": $primary-border-subtle,
  "secondary": $secondary-border-subtle,
  "success": $success-border-subtle,
  "info": $info-border-subtle,
  "warning": $warning-border-subtle,
  "danger": $danger-border-subtle,
  "light": $light-border-subtle,
  "dark": $dark-border-subtle,
);

scss/_maps.scss

$theme-colors-border-subtle-dark: (
  "primary": $primary-border-subtle-dark,
  "secondary": $secondary-border-subtle-dark,
  "success": $success-border-subtle-dark,
  "info": $info-border-subtle-dark,
  "warning": $warning-border-subtle-dark,
  "danger": $danger-border-subtle-dark,
  "light": $light-border-subtle-dark,
  "dark": $dark-border-subtle-dark,
);

Sass mixinsLink to this section: Sass mixins

scss/mixins/_border-radius.scss

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

Sass utilities APILink to this section: Sass utilities API

Border utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

"border-ouds": (
  property: border,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),

scss/_utilities.scss

"border-top-ouds": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-end-ouds": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-bottom-ouds": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-start-ouds": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-width-ouds": (
  property: border-width,
  class: border,
  values: $ouds-border-widths
),
"border-style-ouds": (
  property: border-style,
  class: border,
  values: $ouds-border-styles
),
"border-color-ouds": (
  property: border-color,
  class: border,
  values: $ouds-border-colors
),

scss/_utilities.scss

"rounded-ouds": (
  property: border-radius,
  class: rounded,
  values: $ouds-border-radiuses
),
"rounded-top-ouds": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: $ouds-border-radiuses
),
"rounded-end-ouds": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: $ouds-border-radiuses
),
"rounded-bottom-ouds": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: $ouds-border-radiuses
),
"rounded-start-ouds": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: $ouds-border-radiuses
),

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

scss/_utilities.scss

"border": (
  property: border,
  values: (
    // OUDS mod: null value moved to border-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-top": (
  property: border-top,
  values: (
    // OUDS mod: null value moved to border-top-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    // OUDS mod: null value moved to border-end-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-bottom": (
  property: border-bottom,
  values: (
    // OUDS mod: null value moved to border-bottom-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    // OUDS mod: null value moved to border-start-ouds
    0: 0,
  ),
  bootstrap-compatibility: true
),
"border-color": (
  property: border-color,
  class: border,
  // OUDS mod: no local-vars,
  values: $utilities-border-colors,
  bootstrap-compatibility: true
),
"subtle-border-color": (
  property: border-color,
  class: border,
  values: $utilities-border-subtle,
  bootstrap-compatibility: true
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths,
  bootstrap-compatibility: true
),
// OUDS mod: no "border-opacity"
// scss-docs-end utils-borders
// OUDS mod
// scss-docs-start utils-borders-ouds
"border-top-ouds": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-end-ouds": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-bottom-ouds": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-start-ouds": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    "none": 0,
  ),
),
"border-width-ouds": (
  property: border-width,
  class: border,
  values: $ouds-border-widths
),
"border-style-ouds": (
  property: border-style,
  class: border,
  values: $ouds-border-styles
),
"border-color-ouds": (
  property: border-color,
  class: border,
  values: $ouds-border-colors
),

scss/_utilities.scss

"rounded": (
  property: border-radius,
  class: rounded,
  values: (
    // OUDS mod: null value moved to rounded-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (
    // OUDS mod: null value moved to rounded-top-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (
    // OUDS mod: null value moved to rounded-end-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (
    // OUDS mod: null value moved to rounded-bottom-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (
    // OUDS mod: null value moved to rounded-start-ouds
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of `var(--#{$prefix}border-radius)`
    3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of `var(--#{$prefix}border-radius-lg)`
    4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of `var(--#{$prefix}border-radius-xl)`
    5: $border-radius-xxl * 1.5, // OUDS mod: instead of `var(--#{$prefix}border-radius-xxl)`
  ),
  bootstrap-compatibility: true
),
// scss-docs-end utils-border-radius
// OUDS mod
// scss-docs-start utils-border-radius-ouds
"rounded-ouds": (
  property: border-radius,
  class: rounded,
  values: $ouds-border-radiuses
),
"rounded-top-ouds": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: $ouds-border-radiuses
),
"rounded-end-ouds": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: $ouds-border-radiuses
),
"rounded-bottom-ouds": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: $ouds-border-radiuses
),
"rounded-start-ouds": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: $ouds-border-radiuses
),

Borders

On this page On this page

BorderLink to this section: Border

AdditiveLink to this section: Additive

SubtractiveLink to this section: Subtractive

ColorLink to this section: Color

WidthLink to this section: Width

RadiusLink to this section: Radius

SizesLink to this section: Sizes

Drag and dropLink to this section: Drag and drop

CSSLink to this section: CSS

VariablesLink to this section: Variables

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

CSS semantic tokensLink to this section: CSS semantic tokens

Sass variablesLink to this section: Sass variables

Sass mapsLink to this section: Sass maps

Sass mixinsLink to this section: Sass mixins

Sass utilities APILink to this section: Sass utilities API

On this page