Corner radius and smoothing in Figma - Step-by-Step Guide

Introduction

This feature lets you make the corners of shapes round or smooth. It helps your charts and visuals look softer and easier to read by adjusting the edges.

When you want to make a bar chart's bars look less sharp and more friendly.

When your dashboard shapes need a modern, smooth style for better visual appeal.

When you want to highlight a section by rounding its corners to draw attention.

When you need to soften the edges of buttons or cards in your report design.

When you want to create a consistent look by applying the same corner style across multiple visuals.

Steps

Step 1: Select the shape or frame

- Canvas or Layers panel

The shape's properties appear in the right sidebar

💡 Click directly on the shape or find it in the Layers panel for precise selection

Step 2: Locate the Corner Radius input box

- Design tab in the right sidebar under 'Corner Radius'

You see the current corner radius value for the selected shape

💡 If multiple corners have different values, it shows a mixed state

Step 3: Type a number or drag the slider to adjust the corner radius

- Corner Radius input box

The shape's corners become more or less rounded immediately

💡 Try small increments to see subtle changes

Step 4: Click the corner smoothing icon next to the radius input

- Design tab in the right sidebar

A slider appears to adjust corner smoothing

💡 Smoothing changes how rounded corners blend with edges

Step 5: Drag the smoothing slider left or right

- Corner smoothing slider

Corners change from sharp to smooth curves visually on the shape

💡 Higher smoothing creates softer, more organic corners

Before vs After

Before

Rectangle shape with sharp 90-degree corners and no smoothing

After

Rectangle shape with 20px corner radius and 50% smoothing showing soft, rounded corners

Settings Reference

Corner Radius

📍 Design tab in the right sidebar

Controls how round the corners of a shape are

Default: 0

Corner Smoothing

📍 Design tab next to Corner Radius input

Adjusts the smoothness of the rounded corners for a softer look

Default: 0%

Common Mistakes

Setting corner radius too high on small shapes

It can distort the shape or make corners overlap oddly

Use smaller radius values for small shapes to keep proportions natural

Ignoring corner smoothing after setting radius

Corners may look harsh or mechanical without smoothing

Adjust smoothing slider to soften corners for a polished look

Summary

Corner radius rounds the edges of shapes to make visuals friendlier.

Corner smoothing softens the rounded corners for a natural curve.

Use appropriate radius and smoothing values to keep shapes balanced and clear.