Border and radius

Borders and corner radii 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 enhance readability. Use them purposefully to create visual hierarchy and distinguish interactive or grouped elements. Key considerations include:

Width: Typically 1px
Colour: Use accessible colours from the NSW palette
- For subtle delineation: Grey 03 or Grey 04
- For stronger emphasis: Grey 01.
Purpose: Support content segmentation, define input areas or outline stacked layouts.

Email-specific considerations:

Rounded corners may not render consistently across all email platforms. Ensure visual cues do not rely solely on border radii.
Border colours must meet WCAG 2.1 AA contrast requirements when adjacent to text or on varied backgrounds.
Test designs in common platforms (such as Outlook, Gmail, Apple Mail), and in dark mode, to confirm rendering and legibility.

Corner radius

A 4px border radius is the NSW Government default. This subtle rounding creates a modern, approachable aesthetic while maintaining the formality expected of government communications.

Apply it to elements such as:

buttons
cards
input fields
banners
content blocks.

The consistent use of radii helps unify the visual experience across layouts and devices.

Examples

Divider

Dividers are used to separate content blocks and improve visual hierarchy in email layouts. They help guide the reader's eye and add structure to dense information. Dividers are implemented using a border-top on a <div> within a table cell.

Thickness: 1px to 4px (customisable)
Style: solid
Color: Usually a neutral grey or theme accent (e.g. #cdd3d6 or #002664)
Radius: No border-radius is applied.

Button

Buttons are key interactive elements in email templates. They use a distinct visual style and 4px rounded corners to enhance appearance, support accessibility and improve tap targets on touch devices.

The styling is:

Border Radius: 4px for a subtle, modern curve.
Border: Optional – used primarily in outline buttons.
Outline Variant Border: 1px solid, matching the button text or brand colour.
Solid Variant Border: Typically none, or matches the background colour for consistency