"Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:

* Corner angles and curves
* Edge angles and curves

The size of shape changes can be subtle or more significant."

About shape

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity.

* Displaying shape: **Do**
* Displaying shape: **Don't**

Displaying shape

Usage in UI

University of Michigan - Ann Arbor

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

* Shaping material
* Shape and meaning
* Components and shape
* Shape customization tool
* Implementation

Shape

Material Design Documentation

The Material shape customization tool can be used to generate different shapes for various individual components. A table of shape value ranges indicates recommended value ranges for each component.

Components are organized into three categories, based on their relative size. Components linked to their category will inherit the shape values assigned to the category. Alternatively, individual component corners can be shaped independently of their category’s values.

* Small components
* Medium components
* Large components

Shape Customization Tool

Shaping components: Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

* If a component relies on its shape for identification
* If it has ergonomic requirements, such as a minimum touch target size

Components and Shape

- Communicating Meaning:
- Do and Don'ts

- Shapes can be used to reflect a specific purpose or meaning. 
- Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.




Learn Before

Related

Learn After

Learn After

Related