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-200

.

border-color-disabled

neutral-400

Variants

Variants

Variants

Sides

  1. border-solid All

  2. border-t-solid Top

  3. border-b-solid Bottom

  4. border-l-solid Left

  5. border-r-solid Right

  6. border-y-solid Top and bottom

  7. border-x-solid Left and right

Radius

b-radius-0

0

b-radius-1

4px

b-radius-1pt5

6px

b-radius-2

8px

b-radius-3

12px

b-radius-4

16px

b-radius-5

20px

b-radius-circle

50%

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. ¹

2. Thinkness

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

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. ³

Tokens

Tokens

Tokens

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

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies