Adjust corner radius and smoothing
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.
Note: It's not possible to apply corner radius to lines, arrows, or vector networks with only a single stroke.
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.
Note: Rounded corners may not be available for rectangles you create with the pen tool or rectangles you edit in vector edit mode.
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.
Tip! Your small nudge and big nudge settings apply to corner radius too. Use the ← and → keys to use your small nudge. Hold down Shift to use your big nudge settings with the arrow keys.
Design panel
- Select the layer in the canvas or Layers panel.
- Open the Design panel in the right sidebar.
- 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.
Canvas
You can also adjust the corner radius in the canvas. This only applies to rectangles, stars, and polygons, but not frames.
- Select the shape you want to update.
- Hover over the corner you want adjust until the radius handle appears.
- 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.
Caution: It's not possible to adjust an individual corner's radius in an Instance. This is something to think about when setting corner radius for Components.
Design panel
- Select the shape you want to apply corner radius to.
- Open the Design panel in the right sidebar.
- Click the icon to adjust each individual Corner
- Four fields will appear below the corner radius setting. These appear clockwise: Top left, Top right, Bottom right, and Bottom left.
- Enter a pixel value in the field. Press Tab to move between field.
- 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.
- Select the shape you want to update.
- Hold down the modifier key to adjust a single corner.
- Mac: ⌥ Option
- Windows: Alt
- Hover over the corner you want adjust until the radius handle appears.
- Drag to adjust the radius.
Vector edit mode
- Select the shape you want to update.
- Click Edit object in the toolbar, or press the Enter or Return key to enter vector edit mode.
- Select the individual point in the canvas.
- Adjust the corner radius using the field in the right sidebar.
- Enter a pixel value in the field.
- 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.
Note: You can only adjust the corner radius in vector edit mode, not the corner smoothing.
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.
- Select the layer in the canvas or Layers panel.
- Open the Design panel in the right sidebar.
- Click the icon to adjust each individual corner.
- Click to open the Corner Smoothing setting.
- 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.