Round Rects Are Everywhere

Windows used rounded corners on its buttons from 1.0 to 3.11, then switched to square ones until XP's themed UI, where they were slightly rounded again, until 8 went back to square, and now with 11 they are again rounded:

https://user-images.githubusercontent.com/7389110/64139289-3...

I still prefer the sharp corners.

I’ve enjoyed this story over several decades, but what stands out to me now is the fact that Bill Atkinson was working from home during the creation of the Macintosh.

Aren't Apple rounded rectangles now squircles? https://medium.com/minimal-notes/rounded-corners-in-the-appl...

Related:

Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - Sept 2021 (26 comments)

History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - Jan 2014 (1 comment)

Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - Oct 2011 (1 comment)

The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - Aug 2010 (77 comments)

It's underrated how great Steve Jobs's taste was, and how sincere the "liberal arts + technology" line is

One example of rounded rectangles added purely for aesthetic purposes was the desktop window of the old Mac. When the display turned on during boot, it was naturally square, but then one of the first things the software did was to round its corners. Then they stayed this way until maybe another software switched into full screen. There was nothing like that on Windows and it was obviously a “useless” thing to do. I liked that detail.

> Over the next few months, roundrects worked their way into various parts of the user interface, and soon became indispensable.

At which point we realized they are just a fad like any other design ever was and went to sharp corners and flat design. And back to round corners, and back to sharp, and back to..

Hell, I can see this circle of hell happening in front of my very eyes. I think a year ago someone at Chrome had the brilliant idea to "refresh the design" as happens so often in big organizations and suddenly the tabs got round and we got little round corners around the navigation bar and..

Mac OS ROM hack to generate fully circular windows: https://web.archive.org/web/20201209143138/https://macgui.co...

Learning how to design models for 3D printing now, and rounded corners are a matter of necessity as much as aesthetics. Objects with sharp corners are uncomfortable to hold, even risk of injury with some materials. They are also unhygienic and pain to clean dust out of. On the flipside, math to generate rounded corners on arbitrary shapes is messy and printing these out often requires supports and postprocessing to remove those and polish the curves with sandpaper.

"No, there's no way to do that. In fact it would be really hard to do."

Why would Bill say this? Why would his ellipse optimization not be trivially applicable to a quarter-circle?

In day camp in Brooklyn, we always had woodworking. In successive summers, we had an instructor who wanted us to round the corners and edges of everything, and another instructor who insisted we keep everything as square and sharp as possible.

Every time I see this story, I try counting the round vs square rectangles, and in practice they seem about even in my life. Door frames, picture frames, books, cabinets, and windows are all actually squared off.

(And natural things aren’t rectangles at all!)

Rounded corners are one of the common things on macos that make it look modern and cheerful. iphone icons are more pleasing because of this.

other platforms should add more of this.

Related, fun post: https://ridiculousfish.com/blog/posts/roundy.html

> "No, there's no way to do that…”

This is the key line to me. It turned out it could be done and in less than a day. Even very smart and talented people sometimes need a jerk to tell them to make it happen. Sometimes it backfires and sometimes it doesn’t.

Round rectangles can look not round enough on low-DPI displays, and the colors can also be wrong due to incorrect averaging in non-linear color space. Example: https://github.com/ClickHouse/ClickHouse/pull/33453#issuecom...

It is similar to how subtle gradients look striped and dirty on many websites if displayed with only 24-bit color: https://github.com/cockroachdb/cockroach/issues/91316

I wish I knew about this in the microcomputer days. I started off with SIN() and COS() for circles which were very slow. I realized that you can just scan down a pixel at a time in the Y axis and use Pythagoras for the X. Also for a circle that calculation does 4 points.

But the way posted here would much much faster than that!

It works well for the Mac OS, but for all that it's a core part of the Mac OS identity, I really hate that Microsoft is using round rectangles to the point that device manufacturers are painting the underside of laptop and tablet glass screens so as to cause a physical rounded effect at the corners, and I'd liefer have the crisp square Windows 10 screen appearance than the rounded Windows 11 (though the overall increase in consistency is nice otherwise).

I wasn't even aware that the Mac existed at the time, but I always had a fondness for rounded rectangles because the Amstrad CPC character set had 16 characters that represented all possible combinations of a central dot with N, E, S, W spokes. They were rounded for the 4 cases that represented 90 degrees, and the rounded rectangle look was perfect for using as borders around things.

This was 1984, so wouldn't have been long after the original Mac but was maybe influenced by it. As far as I know, no other 8-bit computers have rounded container characters like this. I later used PCs, and the CGA text mode had its nice 1/2 line variants, which were good for variety, but they were square so I never found them as appealing as the rounded ones I knew from the Amstrad.

Can someone explain the technical detail a bit more detailed than on Folklore...?

"squircles" https://en.wikipedia.org/wiki/Squircle

I remember working on homework for "Discrete Computational Structures" (had to look it up ) in undergrad and having to come up with that sum of sequence of odds is the sequence of squares trick (it becomes clear if you visualize 4 blocks, then 9 blocks). I was like, "is this what I'm supposed to be learning, this feels like I just figured this out by luck". I think I got a B?

This conversation exemplifies every positive interaction I've ever had with any of my really good advisors or bosses. It's exactly what I want from my boss - to be told "that good, but not quite good enough, and I know you can do better even if you don't know it yet".

And then I go off and think some more and outdo myself.

Round rect technique aside (fascinating stuff!), the storytelling here is really charming. Reads like a clever short story

> Bill returned to Texaco Towers the following afternoon, with a big smile on his face. His demo was now drawing rectangles with beautifully rounded corners blisteringly fast, almost at the speed of plain rectangles.

Related post discussing the rounded shapes (and squircles) in design tools:

https://blog.verygoodgraphics.com/posts/rounded-shapes/

I much rather prefer the old UIs that were highly responsive at the speed of thought.

The thing I like is that Bill Atkinson didn't spit the dummy when he didn't get the expected reception to his ovals. Instead he took on the challenge of round rectangles and came up with a solution.

Rounded corners is much like semicolons, and rebasing / merging something impossible to discuss. Most people either strongly dislike the one or the other and are unable to reconcile.

Wow. So this is why Apple's campus visitor center literally has no corners in it. Even the stairwells have all rounded corners.

Not just rounded rectangles, but squircles too. Every icon or rectangular element in Apple software and hardware is a squircle.

Love the story, could have added more in terms of how the round corners feature was solved

Loved it. Will remember this everytime I add "rounded" in tailwind. :)

> Then he pointed out the window.

…which hopefully was still a non-rounded rectangle.

iPhone rounded boxes: https://www.youtube.com/watch?v=bxgg_kW3QLU

they are everywhere indeed because sharp corners can hurt people.

Can we add (1981) to the title please

Yeah, but how?

Oooof, so the rounded corners in UIs is just another Jobs-fetish by UI designers, got it ;(

I viewed this on my RoundRect