Borders & Shadows

Borders and shadows create structure, define element boundaries, and establish depth across components.

Borders and shadows define boundaries, separate content areas, and convey elevation and hierarchy. Borders provide crisp structure, while shadows add subtle depth cues to interactive and floating elements.

Copy link to headline:Borders

Borders delineate containers, define component edges, and indicate interactive states such as focus, hover, or validation.

To ensure consistent rounding across interfaces, we provide semantic border-radius variables. These range from subtle corners to fully rounded pills and circular shapes.

Variable name	Value	Preview
var(--onyx-radius-xs)
var(--onyx-radius-sm)
var(--onyx-radius-md)
var(--onyx-radius-lg)
var(--onyx-radius-xl)
var(--onyx-radius-full)

Copy link to headline:Shadows

Box shadows add elevation to floating containers such as flyouts, popovers, modals, and toasts, separating them from underlying content.

Shadows in dark mode

Shadows provide poor contrast on dark backgrounds. Consequently, all shadow variables resolve to none in dark mode. For dark mode elevation, use a border (such as --onyx-color-component-border-neutral) or background color differentiation.

Variable name	Value	Preview
var(--onyx-shadow-medium-top)
var(--onyx-shadow-medium-bottom)
var(--onyx-shadow-medium-left)
var(--onyx-shadow-medium-right)
var(--onyx-shadow-soft-top)
var(--onyx-shadow-soft-bottom)
var(--onyx-shadow-soft-left)
var(--onyx-shadow-soft-right)