Borders and radius
Borders and corner radius are essential elements of NSW Government visual identity. In digital contexts – including email campaigns – they support a consistent, accessible and professional appearance.
Borders
Borders provide structure and improve readability. Use them purposefully to create visual hierarchy and distinguish interactive or grouped elements.
Standard border settings
- Width: usually 1px
- Colour: use accessible colours from the NSW palette
- Use lighter tones for subtle delineation
- Use darker tones for stronger emphasis
- Purpose: segment content, define input areas or outline stacked layouts
Design considerations for email
- Rounded corners may not render consistently across platforms – avoid relying on them for meaning
- Border colours must meet WCAG contrast requirements when used near text or on varied backgrounds
- Test designs in platforms like Outlook, Gmail and Apple Mail – including dark mode – to confirm they render clearly and remain legible
Corner radius
The standard NSW Government border radius is 4px. This subtle rounding gives a modern, approachable look while maintaining the formality expected of government communications.
Apply 4px corner radius to:
- buttons
- cards
- input fields
- banners
- content blocks.
Consistent use of radius unifies the visual experience across layouts and devices.
Examples
Divider
Dividers separate content blocks and support visual hierarchy in emails. They guide the reader's eye and organise dense information.
Divider styling:
- Thickness: 1px to 4px (customisable)
- Style: solid
- Colour: Usually a neutral grey or theme accent
- Radius: No border-radius is applied.
Button
Buttons are key interactive elements. Their distinct style and 4px corners improve visibility and tap targets on mobile.
Button styling:
- Border radius: 4px
- Border: optional – mainly for outlined buttons
- Outline variant border: 1px solid border matching the button text or brand colour
- Solid variant border: no border or one matching the background colour