Capsule

Overview

Similar to a Rounded Rectangle, Capsules have a corner radius; however their radius is fixed to half the length of the smallest edge (width or height) of the space offered by its parent.

For example, when you insert a Capsule into a component, the shape automatically fills all of the space available in the component while keeping a perfect curve at both ends of the capsule.

You can use modifiers such as Frame or Aspect Ratio to give the Capsule a new parent to fill.

<div class="callout note">Note
A Capsule needs a defined space to fill. If you add the shape directly to the canvas without a Frame, it defaults to 10x10.</div>

Editing Capsules

Capsules come with a Corners, Style, and Color property that you can adjust.

The Corners Property

Capsule shapes have a Corners property which can be set to Circular or Continuous. Changing the style results in a subtle difference in the way the corners are drawn.

‍Circular corners are the more traditional corner radius style while Continuous corners have softer edges—a style that Apple uses frequently in their designs.

The Style Property

The Style property determines whether a Capsule is drawn as a Fill or as a Stroke (border). By default, the shape’s style is set to Fill, but it can be changed to Stroke or Stroke Border from the drop-down.

A Stroke is drawn centered over the path of the Capsule while a Stroke Border is drawn inside the path of the shape.

The Line Width Property

When you select Stroke or Stroke Border, you can control the width of the stroke with the Line Width property.

The Color Property

The Color property defines the color of a Capsule’s Fill or Stroke, depending on the Style chosen.