Borders

Borders are UI styling elements that provide visual separation and hierarchy. Use them sparingly — prefer whitespace and dividing lines where possible.

General principles

• Use sparingly; prefer spacing and low-contrast dividers.
• Avoid full borders around adjacent controls unless necessary.
• Consistent color, width, and radius app-wide.
• Indicate interactivity and selection with border emphasis, not color alone.

Usage by control type

Control	Guidance
Panels and sections	Low-contrast horizontal dividers; no full borders on adjacent headers/menus
Ribbon groups	Low-contrast horizontal lines between groups; consistent margin/padding
Buttons	Borders for focus/active/primary; spacing over borders between adjacent buttons
Menus and pop-ups	Border defines menu boundary; dividers inside; avoid nested bordered elements

Border styles

Style	Width	Usage
Subtle	1px	Section dividers, low-contrast separation
Control	1px	Input and control boundaries
Emphasis	2px	Primary action, focus, selection

Examples

Guidelines

• Standard width is 1px; use 2px only for emphasis (primary action, focus).
• Prefer solid lines; dashed or dotted only for draft/temporary states.
• Corner radius follows Shape foundation (typically 4px on cards/panels).
• Ensure sufficient contrast for focus and selection borders (WCAG).