Border
Figma
Guidelines
Web
Mobile
CommentBorder refers to the outline that surrounds and defines the edges of a visual element, such as a button, input field, or container. It serves multiple purposes: enhancing the element’s visibility, distinguishing it from other components, and contributing to the overall aesthetic of the design.
Borders can be customized in terms of thickness, style (solid, dashed, dotted), and color, allowing designers to create depth, emphasize hierarchy, or convey a specific style or mood.
Proper use of borders can significantly improve user interface clarity and user experience by visually organizing content and guiding user interactions.
Guidelines
Correct / Incorrect
Takeaways
-
Prefer inner borders work better.
-
Mostly use solid borders.
-
Borders are great as a hover effect and active elements. Don’t overuse them by default.
Usage
Implementation
Properties
Border
Class
Type : CSS Class
Variable
Type : CSS Variable