Corner radius

What corner radius does

Corner radius rounds the corners of a layer by specifying how far the curve extends from each corner. A value of 0 produces sharp corners. Larger values produce rounder corners.

Corner radius is supported on rectangles, frames, and components that expose a corner radius property. Individual anchor points on a vector path carry their own corner radius too — see Corner fine-tuning on a vector anchor.

Setting a uniform corner radius

1. Select a layer.
2. In the right inspector, find the Corner radius field (shown as a rounded rectangle icon).
3. Type a value in pixels or use the scrubber to adjust.

All four corners are rounded by the same amount. On a vector path or a shape the field covers every corner the path has, not only four, so typing a value rounds all of them; when the path's corners already differ, or the selection mixes layers with different radii, the field reads Mixed and typing a value (including 0) applies it to everything selected.

Independent corner radii

To set a different radius for each corner:

1. Select a rectangle or frame.
2. In the inspector, click the Independent corners toggle (the icon showing four separate corners).
3. Four separate fields appear — top-left, top-right, bottom-right, and bottom-left.
4. Enter a value for each corner individually.

The toggle only appears when every layer in the selection has four corners to address — frames, rectangles, images and the like. A vector path, or a shape that is not a rectangle (ellipse, polygon, star), hides it for the whole selection: those layers keep the uniform field, and their corners are rounded one at a time in vector edit mode or with the Corner tool.

Corner fine-tuning on a vector anchor

Select an anchor in vector edit mode and the inspector shows its Corner radius, and under it a Corner fine-tuning row with two fields:

• Incoming distance — how far back along the segment arriving at the anchor the rounding starts.
• Outgoing distance — how far along the segment leaving the anchor the rounding ends.

Equal values give an ordinary round corner, and both sides then stop at half the length of the shorter of the two segments, so the corner stays circular instead of stretching into an ellipse. Different values lean the corner, which is how you round a junction whose two segments differ in length or curvature; each field then stops at half the length of the segment it measures along. Anything larger is clamped, and the number you typed is kept, so widening the segment later restores the corner you asked for. With several anchors selected, a field shows the value they share, or Mixed when they differ; typing a number applies it to all of them, and each corner still clamps against its own segment lengths. The row is only there while at least one selected anchor can be rounded — an anchor whose two segments run nearly straight through it has no corner to fine-tune.

These are the same two distances the Corner tool drags on the canvas — see Pen and vector editing.

Common use cases

Tips

• Use a large radius value (e.g., 999) to create a pill shape that stays rounded as the layer is resized.
• Independent corners are useful for tabs (top corners rounded, bottom corners sharp) or specific UI components.
• Corner radius clips the layer's content as well as its border — content near the corners will be clipped by the radius.

Related articles

• Shapes
• Frames
• Right inspector