Before you start

Who can use this feature

Anyone on any team or plan can use these features.

Anyone with can edit access to a file can adjust corner radius and smoothing.

Apply corner radius and smoothing to frames, rectangles, polygons, stars, closed vector networks, and some boolean operations.

In interface design, we see rounded corners on screens, icons, buttons, and cards. Lots of buttons and icons in Figma have rounded corners.

It's easier for eyes to follow circles and curves, while sharp edges disrupt our line of sight. This makes it easier for our eyes to process circles.

We're also used to seeing circles and rounded corners in the physical world. We see both organic and manufactured objects with rounded corners, or as circles.

Circles, and objects with rounded corners, feel softer, friendlier, and safer.

Figma has two features for creating rounded corners:

• Corner radius rounds the corner where two lines meet. Use this to create shapes with rounded corners.
• Corner smoothing adjusts a rounded corner to create a continuous curve. Use this setting to create "squircles".

Apply corner radius and smoothing to:

• Frames
• Basic shapes: rectangles, polygons, and stars.
• Vector networks that are closed shapes.
• Boolean operations that contain rectangles. You can't adjust corner radius for boolean operations that only contain ellipses.

Corner radius

Figma represents corner radius in (density-independent) pixels. You can adjust corner radius for an entire shape, or for each point in a vector object.

Adjust corner radius for an entire shape

By default, Figma applies corner radius to the entire shape. There are a few ways to adjust the corner radius for a vector object or shape.

Design panel

1. Select the layer in the canvas or Layers panel.
2. Open the Design panel in the right sidebar.
3. Enter a pixel value in the Corner Radius field.
4. Or, hover your cursor over the icon, then drag left to reduce and right to increase.

Canvas

You can also adjust the corner radius in the canvas. This only applies to rectangles, stars, and polygons, but not frames.

1. Select the shape you want to update.
2. Hover over the corner you want adjust until the radius handle appears.
3. Drag to adjust the radius.

Adjust the radius of an individual corner

By default, Figma applies corner radius to the entire shape. The independent corner setting lets you adjust the corner radius for each corner. There are a few ways you can do this.

Design panel

1. Select the shape you want to apply corner radius to.
2. Open the Design panel in the right sidebar.
3. Click the icon to adjust each individual Corner
4. Four fields will appear below the corner radius setting. These appear clockwise: Top left, Top right, Bottom right, and Bottom left.
5. Enter a pixel value in the field. Press Tab to move between field.
6. You can also increase and decrease the value by scrubbing the field. Place your cursor in the field and hold down the modifier key. Drag left to reduce and right to increase.
   • Mac: ⌥ Option
   • Windows: Alt

Canvas

You can also adjust the corner radius for an individual corner in the canvas. This only applies to rectangles, stars, and polygons, but not frames.

1. Select the shape you want to update.
2. Hold down the modifier key to adjust a single corner.
   • Mac: ⌥ Option
   • Windows: Alt
3. Hover over the corner you want adjust until the radius handle appears.
4. Drag to adjust the radius.

Vector edit mode

1. Select the shape you want to update.
2. Click Edit object in the toolbar, or press the Enter or Return key to enter vector edit mode.
3. Select the individual point in the canvas.
4. Adjust the corner radius using the field in the right sidebar.
5. Enter a pixel value in the field.
6. You can also increase and decrease the value by scrubbing the field. Hover your cursor over the icon, then drag left to reduce and right to increase.

Corner smoothing for squircles

Designers noticed a difference in the rounded corners of iOS7 app icons. This corner smoothing created a seamless continuous curve that regular rounded corners couldn't.

We refer to shapes that use this particular effect squircles. A shape that's somewhere between a square and a circle. We still see squircles in Apple's later designs, including OS14.

There's quite a bit of mathematics that goes into a squircle. Learn more about one Figma engineer's search for squircles.

Adjust corner smoothing

You can apply corner smoothing to any shape you can apply corner radius to. Unlike corner radius, you can only apply corner smoothing to the entire shape.

1. Select the layer in the canvas or Layers panel.
2. Open the Design panel in the right sidebar.
3. Click the icon to adjust each individual corner.
4. Click to open the Corner Smoothing setting.
5. Drag the slider right to increase and left to decrease. Click iOS to set Corner Smoothing to 60%, the default for iOS.

Images in this article feature Components from the iOS 14 UI Kit for Figma.