How do you use borders, corners, and layering?
Use separation and layering to explain relationships, with purposeful corner and shadow rules.
Borders, rounded corners, and shadows help users recognise boundaries and front-to-back relationships. Give them clear purposes so the page structure is understandable.
Keep these basics in mind
- A border is a line around a part that can define its extent or separate content.
- A corner radius rounds a sharp corner. Similar parts should follow regular choices, while the amount depends on the project.
- Visual hierarchy describes what attracts attention first. Layering places one area above another.
- Shadows can suggest that a menu or overlay sits above content. Not every card needs a shadow.
See Spectrum’s shadow guide for depth relationships and its corner-rounding guide for nested shapes.
Choose a separation method
Illustrative separation choices
These scenarios do not prescribe universal radius or shadow values.
| Area | Previous treatment | Purposeful adjustment |
|---|---|---|
| Ordinary information group | Heavy shadow on every block | Stable spacing or light separation |
| Dropdown menu | Blends into the background | Clear boundary and depth relationship |
| Input inside a card | Corners clash with the outer shape | Coordinate nested shapes and space |
Walk through an example
Opening More actions shows a menu near its button. Boundaries and a suitable shadow distinguish it from the list. The team checks that it does not obscure key guidance and remains readable in a narrow window. Closing it restores the original page structure.
Limits and common misunderstandings
A shadow does not make something clickable; component behaviour must define that. Larger corner radii do not automatically improve usability. Too much separation fragments a page. Determine which content needs grouping before choosing its appearance.