Shapes help make UI personable, easier to process, and recognizable at a glance. Selecting the correct shape for components builds consistent visual vocabulary and narrative.

Form, corner radius, and stroke are the properties used to define shapes.


Fluent components use four simple forms: rectangle, circle, pill, and beak.

Rectangle forms


The rectangle is the basic shape for most common components and containers, like buttons, textareas, menus, cards, and images.

Circle forms


Circles are used for avatars and other components displaying or representing people.

Pill forms


A pill can represent paths like a slider’s track or a toggle’s channel. Pills can also show tags, keywords, or a selection in a list.

Beak forms


A beak offers a reference point for floating surfaces associated with a single object, like callouts or popovers.

Forms are then distinguished from their surroundings either by fills or borders.

Fill forms


Fill styles can define and emphasize a shape.

Border forms


Borders identify the bounding container on unfilled shapes, like cards.

Corner radius

In most cases, corner radiuses on rectangle shapes are 4 pixels by default. For shapes smaller than 32 pixels, the corner angle is reduced to 2 pixels. For large and extra-large components, 8 pixel and 12 pixel angles are used. Follow iOS and Android guidelines for mobile contexts.

Corner radius overview

Corner radius tokens

Use these radius tokens to change the corner radius on elements.

NoneNavigation bars, tab bars0 pixels
SmallSmall badges2 pixels
MediumButtons, dropdown4 pixels
LargeLarge buttons8 pixels
X-LargeButton sheets, popovers12 pixels

Fluent uses rounded corner styles in three areas of UI components: rectangular elements, flyout elements, and pill-shaped or round elements.

Rounded corners in rectangles, flyouts, pills

When to avoid rounded corners

There are instances by default when the corner of a component should not be rounded, like when it would result in awkward gaps.

Avoid unnecessary spaces

Avoid unnecessary spaces

Be sure to exclude space between multiple UI elements in a single container. For example, both parts of a split button.

Skip rounded corners at the screen's edge

Skip rounded corners at the screen’s edge

Rounded corners are not necessary for components that reach the edge of the screen.


Apply stroke properties to create lines, arrows, borders, and vector networks. You can control the weight of the stroke, color, distribution, and endpoint properties.

Stroke overview

Stroke Thickness

Change line thickness with stroke tokens.

Thin1 pixel1 pixel
Thick2 pixels2 pixels
Thicker3 pixels4 pixels
Thickest4 pixels6 pixels

To achieve correct visual weight, consider the size of the element when determining the stroke thickness. For example, on an avatar activity ring, strokes scale from a 2 pixel ring for smaller avatars to a 4 pixel ring for larger avatars. The visual weight feels consistent as the element scales up or down.

Consider the size of the element when determining the stroke thickness

Stroke dash array

Strokes can collect double values that indicate the pattern of dashes and gaps used to outline shapes or use as brushes. Scale everything proportionally based on stroke thickness (n) by following the simple equation for each dash array.

Stroke thickness chart

Stroke caps

Use the listed radius tokens to round the caps of strokes for a consistent feel.

Use rounded corners

Use rounded corners

Avoid square stroke caps

Avoid square stroke caps