What is the name of this effect present on the rectangle (e.g. light brown rectangle), and how is it done? The rectangle does not have a constant border radius, and gives a 'fun'/ friendly feeling.

enter image description here

I took it from Dribble, available here.

Here is my funky analysis: enter image description here

  • I suspect it's not that light brown rectangle.. it's the dark purple shape with rounded corners. ... and I do not believe there's any specific name for such a shape. It could be said the brown magnifying glass shape is "inset".
    – Scott
    Jan 11 at 23:30
  • I added a circle to show that its not a constant border radius. I think almost all the rectangles have this effect Jan 11 at 23:59
  • 1
    Ahh.. I was looking at the wrong thing :) I think that's just a border radius.. I don't know why you seem to feel it's more than that. It's pretty even in my view.
    – Scott
    Jan 12 at 0:03
  • @Scott The central part of the rounding is even, but the sides do not ‘swing back’ to 0°/90° immediately after that rounding – if you removed the rounded corner that you highlighted in your image, you wouldn’t be left with a regular rectangle, but with a slightly bulging one. It’s an interesting effect, but I don’t know if a word for it. ‘Bulging rectangle with rounded corners’ is how I’d describe it. Jan 12 at 0:23
  • hmmm.. seems to me to simply be a % for rounding rather than a hard integer. % will cause more of the rounding to appear to be on the longer edge. I, honestly, see no "bulging" (beyond image anti-aliasing). All I see are rounded corners. So perhaps I'm wrong.
    – Scott
    Jan 12 at 0:40

I don't think there's a specific name for this kind of shape, however you could do something similar with Bézier curves in almost any vector software.

Start with a normal rounded rectangle (i.e. rounded by radius), and pull the Bézier handles out horizontally and vertically, perhaps using a grid to make sure it's exact, and repeat for each corner.

This example was made in Inkscape, but the same is possible in Illustrator and other vector software.

enter image description here

enter image description here

  • Great :). now I just need to figure out how to do it in Flutter. 😃 Jan 12 at 10:26
  • @BenButterworth Flutter doesn't seem to be a vector image editor as far as I can tell. Inkscape is free and Open Source. You can export images as SVG or PNG
    – Billy Kerr
    Jan 12 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.