Shape

Usage Guidance

• We can define the shape of an element by applying a border radius value to it. The border-radius property defines the radius of the element's corners.
• Every Canvas elements presents a specific shape that responds to the use and/or characteristics of this element.
• Our Canvas shape token includes five values ranging from a zero border radius for a rectangular shape with sharp corners to a 999px border radius for a circular shape.

Canvas Shapes

Canvas Shape Tokens uses multipliers with a {base.unit} of 0.25rem.

Shape	Variable	Size	Recommended Usage
	zero	'0rem'	This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
	xhalf	'0.125rem'	Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
	x1	'0.25rem'	Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus, and Banners.
	x2	'0.5'	Use this for all the containers and popups: Canvas Cards, Modals, Tooltips, and Toasts.
	x4	'1rem'	Mobile only: Cards.
	x6	'1.5rem'	Mobile only: Sheets, Modals
	round	'62.5rem'	Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.

Using our Shapes

When working with border-radius, there are certain things we need to consider:

Web Examples

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  borderRadius: `var(${system.shape.x2})`,
};

CSS

// styles.css
.card {
  border-radius: var(--cnvs-sys-shape-x2);
}