Skip to main content
Question

Different border radius styles?


I’ve noticed that some rectangles have different border radius styles (see picture attached below). This seems to happen randomly, and I don’t understand why it happens. The elements are both rectangles, they both have corner radius set to 12px, and as far as I understand, they’re exactly the same in every other way.

So, why is the corner radius “smoother” in the above rectangle, compared to the other?

This topic has been closed for comments

6 replies

ksn
Figmate
  • Community Support
  • 1615 replies
  • April 24, 2024

Hey @EK11 - can you send a copy of the demo showing the screenshot? Were these just objects on the canvas, or were they in a frame or section? I’m assuming that it was just a basic rectangle, duplicated, and then radius changed, but I may be wrong.

I’ve gone in myself to try and replicate (with the colors you have as well), and I see consistency. I want to be sure I mimic everything you built, and check with support if there’s any indication of an issue.


  • 7 replies
  • April 24, 2024

Are you able to share a view only link so that we can take a look at what you have?


  • Author
  • 2 replies
  • April 24, 2024
Figma – 24 Apr 24

Here’s a link to a file with both rectangles.


Weirdo
  • Active Member
  • 24 replies
  • April 25, 2024

It’s corner smoothing feature in Figma.
you can locate it here:
image


  • Author
  • 2 replies
  • April 25, 2024

Thanks @Weirdo! Does this feature work online in Figma, or am I able to transfer this look into our live product using code? When I’m in Dev Mode, the code looks exactly the same regardless of what I set as the corner smoothing %.


Weirdo
  • Active Member
  • 24 replies
  • April 25, 2024

Corner Smoothing is not a regular css code, it require the devs to manipulate the code in order to make it look like in Figma, that’s why at the moment it does not show in the DevMode menu in Figma and many dev ignore corner smoothing - it’s compicated code work.

This feature in Figma is good for creating icons in SVG’s, etc…


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings