Skip to content

Clip Shapes

Clip shapes cut a view to one of the available shapes.

A clip shape can be one of these shapes:

  • Circle.
  • Capsule.
  • Diamond.
  • Hexagon.
  • Parallelogram.
  • Pentagon.
  • Rounded rectangle.
  • Square.
  • Triangle.

Clip shapes apply to visible view content, such as an image, colored surface, or border. These examples clip the same image to different shapes.

A small widget showing an image clipped to a circle.A small widget showing an image clipped to a circle.
Circle
A small widget showing an image clipped to a capsule.A small widget showing an image clipped to a capsule.
Capsule
A small widget showing an image clipped to a rounded rectangle.A small widget showing an image clipped to a rounded rectangle.
Rounded rectangle
A small widget showing an image clipped to a diamond.A small widget showing an image clipped to a diamond.
Diamond

The widget still keeps its own outside shape. Because of that, clip shapes are usually most useful for views inside the canvas, not for trying to change the outer edge of the widget itself.