Skip to content
Loading...

Border tokens control two key style attributes—width and radius. Using them consistently helps maintain a cohesive experience throughout the customer journey. For information on border colours, please see the colour tokens section.

Border radius tokens

Our border-radius system is based on component size (or visual footprint). As a general rule, larger components use a larger radius. To standardise this, we’ve defined eight border-radius values. The smaller values (3–6px) are intended for elements such as badges, buttons, and inputs. The larger values (8–12px) are used for components and containers like tiles, calendars, and modals. Following this principle ensures a consistent experience across the customer journey. If you’re unsure which radius to apply, please contact the GEL team.

  • 0px

    rounded-none

    Removes the border radius

  • 3px

    rounded-sm

    For Small UI component variants - Badges, Buttons, Checkboxes etc.

  • 4px

    rounded-md

    For Medium UI component variants - Inputs, Buttons etc.

  • 5px

    rounded-lg

    For Large UI component variants - Inputs, Buttons etc.

  • 6px

    rounded-xl

    For XLarge UI component variants - Inputs, Buttons, Tabs, Popovers etc.

  • 8px

    rounded-2xl

    For mid size UI components and containers. - Selectors, Panels, Flexi-cells, Date Picker, Tiles etc. Note: These will often nest smaller UI elements like buttons, badges and input fields.

  • 12px

    rounded-3xl

    For large UI components and containers - Modals, Bottom Sheets etc. Note: These will often nest smaller UI elements like buttons, badges and input fields.

  • 16px

    rounded-4xl

    This radius is restricted for very large promos and containers in the Public site.

    Restricted

  • 24px

    rounded-5xl

    This radius is restricted for very large promos and containers in the Public site.

    Restricted

  • full

    rounded-full

    For pill shaped UI components - Badges, Switches, Progress bars etc.

Related information

TokensCopyright © 2025 by Westpac Banking Corporation. All rights reserved.

ArticlesCopyright © 2025 by Westpac Banking Corporation. All rights reserved.

Corner radius

Design principles and guidelines to help you understand how to apply corner radius tokens in your designs. Read more about corner radius tokens