Curving the corners of a rectangle in Figma is a fundamental design operation that allows you to soften edges and create more organic shapes.
Quick Answer
To curve a rectangle corner in Figma, select the rectangle, then either use the corner radius input field in the Properties panel or drag the circular corner handles directly on the canvas. To curve a single corner, hold down the modifier key (Option/Alt) while dragging the handle.
Detailed Guide to Curving Rectangle Corners
Figma provides intuitive ways to adjust the roundness of your rectangle corners, both for all corners simultaneously and for individual corners.
1. Selecting Your Rectangle
First, ensure the rectangle shape you wish to modify is selected on your canvas. You can do this by clicking on it directly.
2. Adjusting All Corners Uniformly
The most common way to curve corners is to apply the same radius to all of them:
- Using the Properties Panel:
- With the rectangle selected, look at the right-hand Properties panel.
- Find the Corner radius input field under the "Design" tab. It often appears as a number next to a square icon or within the "Rectangle" section.
- Click the input field and type in a numerical value for the desired radius (e.g.,
8,16,24). The corners will update instantly. - Alternatively, you can click and drag vertically on the number input field to adjust the radius interactively.
- Dragging on the Canvas:
- When a rectangle is selected, small circular handles often appear near the corners inside the shape, especially if the radius is already greater than 0.
- Click and drag any of these inner handles towards the center of the shape to increase the corner radius, or away from the center to decrease it. All corners will adjust together.
3. Curving a Single Corner (As per Reference)
According to the reference, you can modify each corner's radius independently:
- Select the shape you want to update.
- Hold down the modifier key (usually Option on Mac or Alt on Windows) to adjust a single corner.
- Hover over the corner you want adjust until the radius handle appears. On the canvas, a small circular handle will become visible near the specific corner you are targeting.
- Drag to adjust the radius. While holding the modifier key, click and drag the handle of the specific corner you want to curve. Dragging towards the center of the shape increases the radius for only that corner.
This method allows you to create unique shapes with varying corner roundness, adding visual interest to your designs.
4. Using the Independent Corners Tool
For more precise control or when you don't want to rely on dragging, you can use the dedicated "Independent Corners" tool in the Properties panel:
- With the rectangle selected, look for the Corner radius input field.
- Click the Independent corners icon next to the radius input field (it looks like a square with four separate values).
- Four input fields will appear, representing the Top-left, Top-right, Bottom-right, and Bottom-left corners (often arranged clockwise starting from the top-left).
- Enter a specific numerical value for each corner's radius independently in these fields.
This table summarizes the methods:
| Method | Action | Control Type | Modifier Key Needed? |
|---|---|---|---|
| Properties Panel | Input value in main field | All corners uniform | No |
| Properties Panel | Use Independent Corners | Each corner separate | No |
| Drag on Canvas | Drag inner corner handle | All corners uniform | No |
| Drag Single Corner | Drag specific corner handle | Single corner | Yes (Option/Alt) |
By mastering these techniques, you can easily control the corner radius of your rectangles in Figma, from uniformly rounded edges to asymmetric designs.
