Skip to main content
Documentation/Elements & Controls Reference/Layout and Shared Controls/Shared Controls/Borders and Shadows

Borders and Shadows

Open Design > Borders or the element's corresponding design group.

Border

Under Styling, set width, style, and color for all or individual sides. Color alone does not create a visible border.

Styles: solid, dashed, dotted, none, double, groove, hidden, inset, outset, ridge. Groove, ridge, inset, and outset create shaded effects.

Borders Styling controls showing width, style, color, and individual sides
Borders Styling controls showing width, style, color, and individual sides

Radius

Set Radius for all corners or separate top-left, top-right, bottom-right, and bottom-left values. Radius rounds the element's background/border; children need their own radius or parent overflow clipping.

Radius set to 16px with a rounded card visible on the canvas
Radius set to 16px with a rounded card visible on the canvas

Shadow

  • X / Y — Horizontal/vertical offsets; positive moves right/down.
  • Blur — Edge softness.
  • Spread — Expand/contract the box shadow.
  • Color — Color/transparency.

Add multiple shadows where a list is available. Text shadows omit box-shadow spread and inset. Ancestor overflow can clip outer shadows.

Shared Shadow controls with Color, X, Y, Blur, and Spread
Shared Shadow controls with Color, X, Y, Blur, and Spread

Use responsive and hover values where supported; availability depends on the element/property.