Types of border

We use 3 types of border to outline elements and create dividing lines between content. We call them Graphic borders, Differentiated borders and Functional borders.

Graphic borders

Use white graphic borders to create faint keylines between page elements. The graphic border suggests division in a subtle way and provides structure to a layout but doesn't take focus from the page content.

Differentiated borders

Use differentiated borders to create more clearly defined, ornamental borders to outline sections of content or pieces of functionality. Differentiated borders are more easily visible than a graphic border and draw attention to the way in which content is grouped.

Functional borders

Use a functional border to create a AA accessible border on any surface background colour. Functional borders are used within components to outline important interactive objects like field inputs. Don't use functional borders in a decorative way.

Border tokens

Width

Width is the line thickness of bounding elements.

Radius

Radius (or radii) are the rounded corners in components and other pieces of content.

Colour

Borders use one of the following semantic border colour tokens. When using a border in a semantically colour coded component, like around an error message for example, we use a semantic, toned colour token instead.