Borders

New

Borders & Strokes

Border variations

Use border utilities to add or remove an element's border. Chose from all borders or one at a time, the classes can be combined to create various styles of borders

Example

Border All

Border Top

Border Left

Border Bottom

Border Right

<div class="border-all"></div>
<div class="border-top"></div>
<div class="border-left"></div>
<div class="border-bottom"></div>
<div class="border-right"></div>

Mixed variations

Example

Border Top & Bottom

Border Left & Right 

<div class="border-top border-bottom" ></div>
<div class="border-left border-right"></div>

Border Width

Border Width 0

0px

Removes the border from the element

Example

<div class=" border-all border-width-0"></div>

Border Width 100

1px

Most commonly used

Example

<div class=" border-all border-width-100"></div>

Border Width 200

2px

Used in legacy secondary button

Example

<div class=" border-all border-width-200"></div>

Border Width 300

3px

Used in tabs

Example

<div class=" border-all border-width-300"></div>

Border Width 400

4px

Used in legacy SDI account cards, and tabs in key features

Example

<div class=" border-all border-width-400"></div>

Border Radius

Usages

Below are some of the most common uses cases for having a border radius applied, including examples. Note that this list is not exhaustive and only documents our most common use cases. Specific components will contain UI specs for their specific border radius styling.

Border Radius None

0

Basic/structural design elements, any design element that spans full width within its container or the page: nav bar, sidebar, section splitters

Example

<div class="border-radius-none"></dv>

Border Radius 50

2px

For the smallest UI elements that need rounded borders

Example

<div class="border-radius-50"></dv>

Border Radius 100

4px

For standard UI elements like form fields, dropdowns

Example

<div class="border-radius-100"></dv>

Border Radius 200

6px

Used for all button sizes as the standard border radius for actions. 

Example

<div class="border-radius-200"></dv>

Border Radius 300

8px

For larger components like cards and tiles.

Example

<div class="border-radius-300"></dv>

Border Radius 400

12px

For larger components like cards and tiles.

Example

<div class="border-radius-400"></dv>

Border Radius 500

16px

For the largest and most obvious border rounding. Some cards and large elements may use this value

Example

<div class="border-radius-500"></dv>

Border Radius Rounded

9999px

Currently only used in very specific scenario (floating support button), ensures a rounded circle  on either end of the given element.

Example

<div class="border-radius-rounded"></dv>