View on GitHub

Border

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

On this page

Border

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

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

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

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-minimal"></span>
<span class="border border-muted"></span>
<div class="bg-brand-primary d-inline-flex m-2xsmall p-xsmall"><span class="border border-on-brand-primary m-none bg-transparent"></span></div>
<span class="border border-status-accent"></span>
<span class="border border-status-info"></span>
<span class="border border-status-negative"></span>
<span class="border border-status-positive"></span>
<span class="border border-status-warning"></span>
<span class="border border-always-black"></span>
<span class="border border-always-white"></span>
<div class="bg-always-black d-inline-flex m-2xsmall p-xsmall"><span class="border border-always-on-black m-none bg-transparent"></span></div>
<div class="bg-always-white d-inline-flex m-2xsmall p-xsmall"><span class="border border-always-on-white m-none bg-transparent"></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.

Info

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:

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 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>
html

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

Radius

Add classes to an element to easily round its corners.

Example rounded image75x75 Example top rounded image75x75 Example right rounded image75x75 Example bottom rounded image75x75 Example left rounded image75x75 
<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

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.

Info

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.

Example default rounded image75x75 Example non-rounded image75x75 Example short rounded image75x75 Example medium rounded image75x75 Example tall rounded image75x75 Completely round image75x75 Rounded pill image150x75 
<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
Example small rounded image75x75 Example default left rounded image75x75 Example right completely round image75x75 Example left rounded pill image75x75 Example extra large bottom rounded image75x75 
<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.

Example non-rounded image75x75 Example small rounded image75x75 Example default rounded image75x75 Example large rounded image75x75 Example larger rounded image75x75 Example extra large rounded image75x75 
<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
Example small rounded image75x75 Example default left rounded image75x75 Example right completely round image75x75 Example left rounded pill image75x75 Example extra large bottom rounded image75x75 
<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 drop

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

Danger

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

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