Ready
Borders
Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.
Styles
.
border-color-default
--
neutral-300
.
border-color-disabled
--
neutral-400
.
border-color-default-inverse
--
neutral-900
.
border-radius-0
0px
.
border-radius-1
4px
.
border-radius-1pt5
6px
.
border-radius-2
8px
.
border-radius-2pt5
10px
.
border-radius-3
12px
.
border-radius-4
16px
.
border-radius-5
20px
.
border-radius-circle
100%
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.
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
More
Additional Reading
How to Declutter your Design https://medium.com/wdstack/how-to-declutter-your-design-88cbd9e45015#:~:text=At%20first%2C%20it%20seems%20that,add%20to%20the%20visual%20clutter%E2%80%A6
UI Design in Practice Series: Containers, Boxes and Borders https://designerup.co/blog/ui-design-tips-boxes-and-borders/
All you need to know about UI design Shapes and Objects https://hype4.academy/articles/design/all-you-need-to-know-about-ui-design-shapes-and-objects