All Collections
Rounded Rectangle
Rounded Rectangle

A rectangular shape with rounded corners that fills the space offered by its parent.

Updated over a week ago


Rounded Rectangle shapes expand to fill the space offered to them by their parent. For example, when you insert a Rounded Rectangle into a component, the shape automatically fills all of the space available in the component.

Pro Tip

Press u on your keyboard to insert a Rounded Rectangle.

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


A Rounded Rectangle needs a defined space to fill. If you add the shape directly to the canvas without a Frame, it defaults to 10x10.

Editing Rectangles

Rounded Rectangles come with a Radius, Corners, Style, and Color property that you can adjust.

The Radius Property

The Rounded Rectangle shape has a corner Radius property that configures how rounded its corners are. By default, it has a Radius of 8 points.

The Corners Property

Rounded Rectangles 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 Rounded Rectangle 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 Rounded Rectangle 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 Rounded Rectangle’s Fill or Stroke, depending on the Style chosen.

Did this answer your question?