Corner smoothing in Figma doesn’t seem to work when the radius is 50% or 1/2 the height of the rectangle aka pills or rounded buttons. If you look at Airbnb’s or Apple’s pills, they appear to have a corner smoothing applied. Is there a workaround to get this effect in this scenario or is it something we just need to communicate to engineers when handing off designs?
Question
Corner smoothing on pills
This topic has been closed for replies.
Hey there, thanks for reaching out!
You can apply corner smoothing to any shape you can apply corner radius to. Unlike corner radius, you can only apply corner smoothing to the entire shape.
- Select the layer in the canvas or Layers panel.
- Open the Design panel in the right sidebar.
- Click the Independent corners icon to open the Corner radius panel.
- Use the slider to adjust corner smoothing.
- Click
iOSto set corner smoothing to 60%, the default for iOS.
This is not a completely perfect solution, but it’s the only universal method. We create a rectangle with the desired corner radius, stretch it vertically, then duplicate it, align both rectangles to form the shape we need, and finally use the Intersect Selection tool.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.