Skip to main content
Bradley_Gabel
Bradley_Gabel
December 6, 2023
Question

Corner smoothing on pills

  • December 6, 2023
  • 2 replies
  • 834 views

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?

    This topic has been closed for replies.

    2 replies

    djv
    Figmate
    djv
    Community Support
    December 7, 2023

    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.

    1. Select the layer in the canvas or Layers panel.
    2. Open the Design panel in the right sidebar.
    3. Click the Independent corners icon to open the Corner radius panel.
    4. Use the slider to adjust corner smoothing.
    5. Click iOS to set corner smoothing to 60%, the default for iOS.
    Dmitry_Egorov
    Dmitry_Egorov
    New Member
    November 21, 2024

    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.

      Terms & ConditionsAccessibility statement