Loading...
Loading...
A NSW Government website
Search for a command to run...
Loading...
Loading...
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 provide structure and improve readability. Use them purposefully to create visual hierarchy and distinguish interactive or grouped elements.
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:
Consistent use of radius unifies the visual experience across layouts and devices.
Dividers separate content blocks and support visual hierarchy in emails. They guide the reader's eye and organise dense information.
Divider styling:
Buttons are key interactive elements. Their distinct style and 4px corners improve visibility and tap targets on mobile.
Button styling:
<table class="row" align="center" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#ffffff" style="background-color: #ffffff">
<tbody>
<tr valign="top" style="vertical-align: top">
<th class="column mobile-12" width="544" style="padding-left: 48px; padding-right: 48px; font-weight: 400; text-align: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="left" class="col">
<table align="left" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" dir="ltr" lang="en" style="font-family: 'Public Sans', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important; text-align: left; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.5; mso-line-height-rule: exactly; letter-spacing: normal; color: #22272b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle">
<div class="sans-serif" style="font-family: 'Public Sans', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important; text-align: left; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.5; mso-line-height-rule: exactly; letter-spacing: normal; color: #22272b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" style="padding: 16px 0; font-size: 0; line-height: 0">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td height="1" style="background-color: #cdd3d6; border: none; height: 1px; font-size: 0; line-height: 0; margin: 0; mso-border-alt: solid #cdd3d6 1px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" dir="ltr" lang="en" style="font-family: 'Public Sans', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important; text-align: left; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.5; mso-line-height-rule: exactly; letter-spacing: normal; color: #22272b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle">
<div class="sans-serif" style="font-family: 'Public Sans', system-ui, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important; text-align: left; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.5; mso-line-height-rule: exactly; letter-spacing: normal; color: #22272b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle">
Lorem
<span style="display: inline-block; border: 0; margin: 0 8px; background-color: #cdd3d6; color: #cdd3d6; height: 16px; width: 1px; vertical-align: middle"> </span>
ipsum
<span style="display: inline-block; border: 0; margin: 0 8px; background-color: #cdd3d6; color: #cdd3d6; height: 16px; width: 1px; vertical-align: middle"> </span>
dolor
<span style="display: inline-block; border: 0; margin: 0 8px; background-color: #cdd3d6; color: #cdd3d6; height: 16px; width: 1px; vertical-align: middle"> </span>
sit amet
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table><table class="row" align="center" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#ffffff" style="background-color: #ffffff">
<tbody>
<tr valign="top" style="vertical-align: top">
<th class="column mobile-12" width="640" style="padding-left: 0px; padding-right: 0px; font-weight: 400; text-align: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="left" class="col">
<table class="row" align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td class="spacer" height="16" style="font-size: 0px; line-height: 0px; mso-line-height-rule: exactly">‌</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" align="center" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#ffffff" style="background-color: #ffffff">
<tbody>
<tr valign="top" style="vertical-align: top">
<th class="column mobile-12" width="544" style="padding-left: 48px; padding-right: 48px; font-weight: 400; text-align: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="left" class="col">
<div class="text-left mobile-left">
<!--[if mso]>
<v:roundrect arcsize="10%" style="height: 56px; mso-wrap-style: none;" stroke="f" fillcolor="#002664" alt="">
<![endif]-->
<a href="https://email.designsystem.nsw.gov.au" style="display: inline-block; text-decoration: none; padding: 16px 24px; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; mso-line-height-rule: exactly; line-height: 1; border-radius: 4px; mso-border-right-alt: none; mso-border-bottom-alt: none; mso-border-left-alt: none; mso-border-top-alt: none; border: 2px solid #002664; background-color: #002664; color: #ffffff" class="hover-bg-primary-750 hover-border-primary-750">
<!--[if mso]><i class="mso-font-width-150pc" style="mso-text-raise: 27px" hidden=""> </i><![endif]-->
<span style="mso-text-raise: 16px">Get started</span>
<!--[if mso]><i class="mso-font-width-150pc" hidden=""> ​</i><![endif]-->
</a>
<!--[if mso]>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" align="center" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#ffffff" style="background-color: #ffffff">
<tbody>
<tr valign="top" style="vertical-align: top">
<th class="column mobile-12" width="640" style="padding-left: 0px; padding-right: 0px; font-weight: 400; text-align: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="left" class="col">
<table class="row" align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td class="spacer" height="16" style="font-size: 0px; line-height: 0px; mso-line-height-rule: exactly">‌</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px">
<table class="row" align="center" cellpadding="0" cellspacing="0" role="presentation" bgcolor="#f5f5f5" style="background-color: #f5f5f5">
<tbody>
<tr valign="top" style="vertical-align: top">
<th class="column mobile-12" width="640" style="padding-left: 0px; padding-right: 0px; font-weight: 400; text-align: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td align="left" class="col">
<table class="row" align="center" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tbody>
<tr>
<td class="spacer" height="24" style="font-size: 0px; line-height: 0px; mso-line-height-rule: exactly">‌</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>