Before you start

Who can use this feature

Available on any plan 

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

In interface design, we see rounded corners on screens, icons, buttons, and cards. It's easier for eyes to follow circles and curves, while sharp edges disrupt our line of sight.

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.

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".

You can apply corner radius and smoothing to:

• Frames
• Rectangles, polygons, and stars
• Vector networks that are closed shapes
• Boolean operations that contain rectangles

Adjust corner radius for an entire shape

There are a few ways to adjust the corner radius for a vector object or shape.

Design tab

1. Select the layer.
2. Enter a pixel value in the Corner radius field in the right sidebar or hover your cursor over the icon, then click and drag left to reduce or right to increase.

Canvas

You can also adjust the corner radius for rectangles, stars, and polygons on the canvas. 

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. There are a few ways to adjust the corner radius for individual corners. 

Independent corners setting (frames and rectangles only)

The Independent corners setting is available for rectangles and frames. 

1. Select the rectangle or frame you want to update.
2. Click Independent corners in the right sidebar.
3. In the Corner radius details panel, you can:
   • Enter a pixel value for each corner
   • Click Apply variable in any of the four corner radius fields to apply a number variable
   • Use the slider to adjust corner smoothing

1.  

Canvas (rectangles only)

You can also adjust the corner radius for an individual corner on the canvas. This only applies to rectangles.

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 (shapes and closed vector networks only)

1. Select the shape you want to update.
2. Click Edit object in the toolbar, or press Enter or Return 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 Corner radius field or 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 Independent corners icon to open the Corner radius panel.
4. Use the slider to adjust corner smoothing or click iOS to set corner smoothing to 60%, the default for iOS.