How to change the Corner Radius of a Frame or Shape in Figma

A step by step guide on adding a corner radius to all corners or specific corners of a frame or shape.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/15/2023 at 14:26
Last Updated on 07/18/2023 at 14:29
<p>A flower that represents Figma with the text “Corner Radius” beneath it.</p>

A step by step guide on adding a corner radius to all corners or specific corners of a frame or shape.

SubscribeCheck out our free mobile e-commerce Figma design file

Step One: Select a Frame or a Shape

<p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The frame is highlighted indicating that it has been selected.</p>

Select a Frame or a Shape.

How to create a Frame in FigmaHow to add shapes to a Frame in Figma

Step Two: Change the radius of every corner

<p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The frame is highlighted indicating that it has been selected and has a corner radius. We have also highlighted the corner radius input on the right menu bar which has a 60px value - change this to change the corner radius of a shape or a frame.</p>

To change all the corner radii of a frame or shape, change the corner radius value on the right menu bar.

<p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The rectangle is highlighted indicating that it has been selected and has a corner radius. We have also highlighted the corner radius input on the right menu bar which has a 100px value - change this to change the corner radius of a shape or a frame.</p>

The same technique works for a rectangle.

<p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The triangle is highlighted indicating that it has been selected and has a corner radius. We have also highlighted the corner radius input on the right menu bar which has a 60px value - change this to change the corner radius of a shape or a frame.</p>

The same technique works for any other shape.

Step Three: Change Individual Corner Radii

<p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The frame is highlighted indicating that it has been selected and has different corner radius per corner. We have also highlighted the box next to the corner radius input. Click it to open a menu that reveals the individual radiuses. This menu shows that we have set different radii per corner of the frame - change them to change the individual radii.</p>

To change the individual radii, click the independent corners icon next to the corner radius input to reveal the individual corner inputs that appear below the original corner radius input. Change the individual corners radii to adapt a frame or rectangle to your specifications.

Please note this is only available for frames and rectangles.

<p>A screenshot of Figma showing that the ability to change the individual radii is also available for rectangles.</p>

The same technique works for a rectangle.

Step Four: Click and Drag

<p></p> <p>A screenshot of Figma with a Frame, Rectangle and Triangle shape on screen, beneath them sits labels that state “Frame” “Rectangle” and “Shape” respectively. The triangle has been selected and we have highlighted the circles that appear on the corners. If you click and drag these circles you can change the corner radii visually.</p> <p></p>

Finally, on shapes only (including rectangles) you can click and drag the circles that appear near the corners to change the corner radii visually.

Please note that this change will apply to all corner radii.

Looking to learn more about the basics behind styling frames, paths, shapes and text in Figma ?

Consult the list below to learn more about the basics behind styling text, shapes, paths and frames in Figma.

How to change the Background Color of a Frame or a Shape in FigmaHow to add a Background Gradient Color to a Frame or Shape in FigmaHow to add a Background Image to a Frame or Shape in FigmaHow to add and style a Stroke on a Frame, Path, Shape or TextHow to add Effects to a Frame, Path, Shape or Text in FigmaHow to Style Text in FigmaHow to use Variable Fonts in FigmaSearch blog for all Figma tutorials

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe