Ready

Borders

Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.

Ready

Borders

Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.

Ready

Borders

Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.

Styles

Styles

Styles

.

border-color-default

--

neutral-300

.

border-color-default

--

neutral-300

.

border-color-default

--

neutral-300

.

border-color-disabled

--

neutral-400

.

border-color-disabled

--

neutral-400

.

border-color-disabled

--

neutral-400

.

border-color-default-inverse

--

neutral-900

.

border-color-default-inverse

--

neutral-900

.

border-color-default-inverse

--

neutral-900

.

border-radius-0

0px

.

border-radius-0

0px

.

border-radius-0

0px

.

border-radius-1

4px

.

border-radius-1

4px

.

border-radius-1

4px

.

border-radius-1pt5

6px

.

border-radius-1pt5

6px

.

border-radius-1pt5

6px

.

border-radius-2

8px

.

border-radius-2

8px

.

border-radius-2

8px

.

border-radius-2pt5

10px

.

border-radius-2pt5

10px

.

border-radius-2pt5

10px

.

border-radius-3

12px

.

border-radius-3

12px

.

border-radius-3

12px

.

border-radius-4

16px

.

border-radius-4

16px

.

border-radius-4

16px

.

border-radius-5

20px

.

border-radius-5

20px

.

border-radius-5

20px

.

border-radius-circle

100%

.

border-radius-circle

100%

.

border-radius-circle

100%

Best Practices

Best Practices

Best Practices

1

.

Use sparingly

Overusing borders can create visual clutter and detract from the content. Use them sparingly to group related elements, define clear hierarchy, and guide users' attention. ¹

Do

Don't

2

.

Thinkness

Thick borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²

Do

Don't

3

.

Purposeful placement

Every border should have a clear purpose. Don't add them simply for decoration.

3

.

Purposeful placement

Every border should have a clear purpose. Don't add them simply for decoration.

3

.

Purposeful placement

Every border should have a clear purpose. Don't add them simply for decoration.

4

.

Border radius

Rounded corners can soften the look of borders and add a touch of personality. Experiment with different levels of curvature to find the right balance for your design. ³

Do

Don't

Tokens

Tokens

Tokens

Name

Value

Name

Value

Name

Value

--

b-radius-0

border-radius: 0px

--

b-radius-0

border-radius: 0px

--

b-radius-0

border-radius: 0px

--

b-radius-0-right

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

--

b-radius-0-right

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

--

b-radius-0-right

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

--

b-radius-0-left

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

--

b-radius-0-left

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

--

b-radius-0-left

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

--

b-radius-1

border-radius: 4px

--

b-radius-1

border-radius: 4px

--

b-radius-1

border-radius: 4px

--

b-radius-2

border-radius: 8px

--

b-radius-2

border-radius: 8px

--

b-radius-2

border-radius: 8px

--

b-radius-3

border-radius: 12px

--

b-radius-3

border-radius: 12px

--

b-radius-3

border-radius: 12px

--

b-radius-5

border-radius: 20px

--

b-radius-5

border-radius: 20px

--

b-radius-5

border-radius: 20px

--

b-radius-circle

border-radius: 50%

--

b-radius-circle

border-radius: 50%

--

b-radius-circle

border-radius: 50%

--

border-{color}

border-width: 1px

--

border-{color}

border-width: 1px

--

border-{color}

border-width: 1px

--

border-t-{color}

border-top-width: 1px

--

border-t-{color}

border-top-width: 1px

--

border-t-{color}

border-top-width: 1px

--

border-b-{color}

border-bottom-width: 1px

--

border-b-{color}

border-bottom-width: 1px

--

border-b-{color}

border-bottom-width: 1px

--

border-l-{color}

border-left-width: 1px

--

border-l-{color}

border-left-width: 1px

--

border-l-{color}

border-left-width: 1px

--

border-r-{color}

border-right-width: 1px

--

border-r-{color}

border-right-width: 1px

--

border-r-{color}

border-right-width: 1px

--

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

--

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

--

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

--

border-x-{color}

border-left-width: 1px; border-right-width: 1px

--

border-x-{color}

border-left-width: 1px; border-right-width: 1px

--

border-x-{color}

border-left-width: 1px; border-right-width: 1px

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies