Corner radius
Round the corners of rectangles, frames, and other supported layers.
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.
Setting a uniform corner radius
- Select a layer.
- In the right inspector, find the Corner radius field (shown as a rounded rectangle icon).
- Type a value in pixels or use the scrubber to adjust.
All four corners are rounded by the same amount.
Independent corner radii
To set a different radius for each corner:
- Select a rectangle or frame.
- In the inspector, click the Independent corners toggle (the icon showing four separate corners).
- Four separate fields appear — top-left, top-right, bottom-right, and bottom-left.
- Enter a value for each corner individually.
Common use cases
| Radius | Use case |
|---|---|
| 4–8 px | Subtle softness on cards, input fields |
| 12–16 px | Button shapes, chip components |
| 50% of shorter side | Pill shape (fully rounded ends) |
| 999 px | Force a perfect pill regardless of size |
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.