How to Round Corners in Figma: Quick Shape Tips

Sharp corners feel aggressive. Rounded corners feel approachable.

Learning how to round corners in Figma transforms basic rectangles into polished UI elements that users actually want to interact with.

The corner radius property sits at the heart of modern interface design. Buttons, cards, input fields, app icons. They all rely on this single adjustment.

This guide walks you through every method available in Figma’s Design panel.

You’ll learn uniform radius application, independent corner control, canvas handle adjustments, and iOS-style corner smoothing for squircle shapes.

Whether you’re styling a quick wireframe in Figma or refining pixel-perfect components, these techniques apply to frames, shapes, images, and vector paths.

Takes about 5 minutes to master.

How to Round Corners in Figma

Rounding corners in Figma is the process of applying curved edges to shapes, frames, and images using the Corner Radius property in the Design panel.

Users need this when creating UI buttons, cards, input fields, or app icons that require softer edges.

This guide covers 4 methods requiring 2 to 5 minutes and basic Figma navigation skills.

The techniques apply to rectangles, frames, components, and even placed images on your canvas.

Prerequisites

Before adjusting corner radius values, confirm you have these essentials ready:

• Figma account (free or paid plan works)
• Figma Desktop App or Browser version (2024 or later)
• Basic understanding of canvas navigation and selection tools
• A shape, frame, or image element to modify
• Time estimate: 2 to 5 minutes

The corner radius feature works on rectangles created with the Rectangle Tool, frames, and most vector shapes.

Lines, arrows, and single-stroke vector networks do not support this property.

Step One: How Do You Access the Corner Radius Property?

Select any shape on the canvas using the Move Tool (V), then locate the right sidebar under the Design tab where the Corner Radius field displays a number input with a corner icon.

Action Steps

1. Select Move Tool (V) or click directly on your shape
2. Look at the right sidebar, find the Design tab
3. Locate the Corner Radius field showing a pixel value (default is 0)

The corner icon sits next to the input field.

If you don’t see this option, your selected element might be a line or grouped object that doesn’t support radius adjustments.

Purpose

Accessing the properties panel is the foundation for all corner modifications.

Without locating this field, you cannot input specific pixel values or enable independent corner controls.

When you’re ready to make a button in Figma, this becomes your starting point for styling.

Step Two: How Do You Apply Uniform Corner Radius to All Corners?

Click the Corner Radius field and enter a pixel value like 8, 12, or 16 to apply identical rounding to all four corners simultaneously.

Action Steps

1. Select the shape or frame on canvas
2. Click the Corner Radius field in the right sidebar
3. Type a pixel value (common choices: 4px for subtle, 8px for moderate, 16px for pronounced)
4. Press Enter or click outside the field

All four corners update at once.

The shape transforms from sharp 90-degree angles to smooth curved edges.

Keyboard Shortcuts

Use arrow keys for fine adjustments.

Left and right arrows apply your Small nudge setting.

Hold Shift while pressing arrows to use Big nudge values for faster changes.

Purpose

Uniform radius creates consistent, balanced shapes perfect for Bootstrap cards styling, standard buttons, and container elements.

Most user interface components use identical corner values across all edges for visual harmony.

Step Three: How Do You Round Individual Corners Separately?

Click the Independent Corners icon (four small squares) next to Corner Radius, then enter different pixel values for Top Left, Top Right, Bottom Right, and Bottom Left corners.

Action Steps

1. Select your shape on canvas
2. Click the Independent Corners icon in the right sidebar (looks like four small squares or a chain-link symbol)
3. Four separate input fields appear for each corner
4. Enter unique values: Top Left, Top Right, Bottom Right, Bottom Left

Now each corner responds independently.

Set one corner to 20px while keeping others at 0px for asymmetric designs.

Canvas Method

You can also adjust individual corners directly on the canvas.

Hold Option (Mac) or Alt (Windows) while dragging a corner radius handle.

Only that specific corner changes while others remain fixed.

Purpose

Independent corner control lets you create tabs, speech bubbles, and custom UI elements.

This feature supports creative shape variations that uniform radius cannot achieve.

When learning how to use components in Figma, asymmetric corners help distinguish interactive states.

Limitation

You cannot adjust individual corner radius on component instances.

Edit the main component directly, or detach the instance first.

Step Four: How Do You Round Corners Using Canvas Handles?

Select any shape with the Move Tool (V), hover over a corner until the circular radius handle appears, then click and drag toward the center to adjust rounding visually.

Action Steps

1. Select shape with Move Tool (V)
2. Hover over any corner until the small circular handle appears
3. Click and drag the handle inward
4. Release when you reach desired roundness

All four corners update simultaneously by default.

Modifier Keys for Single Corners

• Mac: Option + drag
• Windows: Alt + drag

This method gives you real-time visual feedback without typing pixel values.

Faster than the properties panel for quick iterations.

Purpose

Canvas handles work best during early design exploration when exact values don’t matter yet.

Once you finalize the look, check the sidebar for the precise pixel number.

Step Five: How Do You Apply Corner Smoothing for iOS-Style Squircles?

Click the three-dot menu next to Independent Corners, then adjust the Corner Smoothing slider from 0% to 100% to create continuous curves instead of standard rounded corners.

Action Steps

1. Select a shape with existing corner radius (must be greater than 0)
2. Click the three-dot menu (⋯) next to the corner controls
3. Drag the Corner Smoothing slider
4. Set to 60% for iOS-style squircle appearance

The effect applies to all corners simultaneously.

You cannot smooth individual corners separately.

Smoothing Values Explained

• 0%: Standard rounded corners matching CSS Border Radius Generator output
• 60%: iOS-style squircle (Apple’s continuous curve)
• 100%: Maximum smoothing effect

Apple introduced squircles with iOS 7 in 2013.

The curve feels more organic than traditional border-radius because it eliminates the abrupt transition between straight edges and rounded sections.

Purpose

Corner smoothing creates app icons and UI elements that match native iOS design language.

Use 0% for web projects where CSS border-radius handles implementation.

When you use Figma to design an app for Apple platforms, 60% smoothing ensures visual consistency.

Step Six: How Do You Round Corners on Images?

Select any placed image on canvas, locate the Corner Radius field in the right sidebar, and enter a pixel value to apply rounded edges directly to the image.

Action Steps

1. Select your placed image on canvas
2. Find Corner Radius in the right sidebar
3. Enter pixel value (8, 12, 16, etc.)
4. Corners round immediately

Images in Figma function as filled rectangles.

The radius property works identically to shapes.

Purpose

Rounded image corners soften visual presentation without exporting to external editors.

Perfect for avatar images, card thumbnails, and gallery layouts where sharp edges feel too harsh.

If you need to crop in Figma before rounding, handle that step first.

Step Seven: How Do You Round Corners in Vector Edit Mode?

Double-click a shape or press Enter to access Vector Edit Mode, select an individual anchor point, then adjust the Corner Radius value in the right sidebar for that point only.

Action Steps

1. Select shape on canvas
2. Press Enter or double-click to enter Vector Edit Mode
3. Click on a single anchor point
4. Adjust Corner Radius in the sidebar

Only the selected point receives the radius change.

Other corners remain unaffected.

Limitation

Corner smoothing is not available in Vector Edit Mode.

You only get standard rounded corners here, no squircle option.

Purpose

Vector Edit Mode handles complex custom shapes where standard rectangle controls don’t appear.

Use this for cutting shapes in Figma or modifying paths created with the Pen Tool.

Verification

Confirm the process worked correctly with these checks:

• Visual check: Corners display curved edges instead of sharp 90-degree angles
• Sidebar check: Corner Radius field shows your entered value (not 0)
• Independent corners: Each field reflects individual settings if applied
• Smoothing check: Squircle effect visible when slider exceeds 0%

If corners still appear sharp, verify you selected the correct layer.

Groups and boolean operations sometimes block radius adjustments.

Troubleshooting

Corner Radius Field Not Visible or Grayed Out

Verify your selected element is a rectangle, frame, or supported shape.

Lines, arrows, and single-stroke vector networks do not support corner radius.

Try ungrouping in Figma if the element is nested.

Corner Radius Resets After Editing

Check if the element sits inside an Auto Layout frame with conflicting settings.

Adjust frame structure or remove constraints causing the reset.

Corner Smoothing Option Missing

Apply a corner radius first.

The smoothing slider requires an existing radius value greater than 0.

Independent Corners Not Working on Component Instance

Known Figma limitation.

Edit individual corner radius on the main component, or remove the component to modify directly.

Related Topics

Continue building your Figma skills with these related guides:

• How to Make a Frame in Figma
• How to Make a Gradient in Figma
• How to Create Variants in Figma
• How to Scale in Figma
• How to Export Figma to HTML

Understanding corner radius helps when you design a website in Figma or build mobile app interfaces.

The same principles apply to prototyping in Figma where rounded elements improve perceived usability.

FAQ on How To Round Corners In Figma

Where is the corner radius option in Figma?

The Corner Radius field sits in the right sidebar under the Design tab.

Select any shape or frame, then look for the input field with a corner icon showing a pixel value. Default is 0.

Can I round only one corner of a shape in Figma?

Yes. Click the Independent Corners icon next to the Corner Radius field.

Four separate inputs appear for Top Left, Top Right, Bottom Right, and Bottom Left. Enter different values for each.

What is the keyboard shortcut for corner radius in Figma?

No direct keyboard shortcut exists for applying corner radius.

Use arrow keys to adjust values after clicking the field. Hold Shift for larger increments based on your nudge settings.

How do I round corners on an image in Figma?

Select the placed image on canvas. The Corner Radius field appears in the right sidebar.

Enter any pixel value. Images function as filled rectangles, so radius works identically to shapes.

What is corner smoothing in Figma?

Corner smoothing creates continuous curves called squircles instead of standard rounded corners.

Access it via the three-dot menu next to corner controls. Set to 60% for iOS-style appearance.

Why can’t I change the corner radius in Figma?

The element might be a line, arrow, or grouped object that doesn’t support radius.

Try selecting individual shapes within groups. Boolean operations and vector networks with single strokes also block this feature.

How do I round corners on a component instance?

You cannot adjust independent corners on instances directly.

Edit the main component instead, or detach the instance to modify freely. Changes to main components propagate to all linked instances.

What is the difference between corner radius and corner smoothing?

Corner radius sets the curve size in pixels. Corner smoothing adjusts the transition quality between straight edges and curves.

Radius creates standard CSS-style corners. Smoothing creates organic squircle shapes.

Can I use corner radius with Auto Layout frames?

Yes. Grids in Figma and Auto Layout frames fully support corner radius.

Apply radius directly to the frame. Child elements inherit clipping if they extend beyond the rounded boundary.

How do I reset corner radius to zero in Figma?

Select the shape and enter 0 in the Corner Radius field.

All corners return to sharp 90-degree angles immediately. For independent corners, set each of the four values to 0 separately.

Conclusion

You now know how to round corners in Figma using every available method.

The Design panel handles uniform radius. Independent corners unlock asymmetric designs. Canvas handles speed up visual exploration. Corner smoothing delivers iOS-style squircles.

Each technique serves different scenarios in your workflow.

Start with the properties panel for precise pixel values. Switch to drag handles when experimenting. Apply 60% smoothing for Apple platform projects.

Rounded corners affect more than aesthetics. They influence how users perceive clickable elements, content containers, and navigation components.

Softer edges signal safety and approachability.

Practice these corner radius techniques on your next Figma components. The difference between amateur and polished UI often comes down to consistent, intentional shape styling.

Small detail. Big impact.