To me, the current Nextcloud rounded corners look a bit off. I couldn’t put my finger on the reason until today. Turns out a lot of software uses “squircles” for modern looking rounded edges.
To quote a Figma engineer:
"My story begins long before I started at Figma, on June 10th, 2013, the day Apple released iOS 7. There was something subtle about the update: the home screen’s app chiclets had a juicier, more organic feel. They’d gone from squares with rounded corners, to squircles (a portmanteau of ‘square’ and ‘circle’).
What is the difference, you ask? To be fair, it’s slight — A squircle begins as the old rounded square, but with some sandpaper applied to the part where the rounding begins on each side of each corner so the transition from straight to curved is less abrupt.
Articulating this using mathematical language is precise: The curvature of a squircle’s perimeter is continuous, whereas a rounded square’s is not. This may seem trivial, a cool story, but subconsciously it really makes a big impact: a squircle doesn’t look like a square with surgery performed on it; it registers as an entity in its own right, like the shape of a smooth pebble in a riverbed, a unified and elemental whole."
In addition when working on the rounded corners for the application area consider making them a bit smaller since some scrollbars and application integrations get cut off and that does not look very nice:
@jan Great to hear it’s on your radar I’ll definetely check out the Link.
@awelzel Good find with the CSS Houdini repo and the scrollbar cutoff!
@wwe I would prefer to keep this thread on topic regarding improvements to the rounded corner aspect of the new design instead of keeping the team busy with general opinion discussion on multiple channels.
As another suggestion for improvement: the area for app integration (e.g. Draw.io or Office apps) should take into account that there is also a inner margin needed so things don’t get cut off in the corners as shown in the screenhots. This may still look a bit strange since you then have a think, rounded border around the content, but I would prefer this over getting content get cut off a the corners just to make them round.
The main issue is the content areas. The rounded corners is not matching some other design elements. To me it looks better if the radius is reduced. I have set the content area corners to border-radius:10px;
While some discuss whether the rounded corners (what a term ) can still be embellished, others want a smaller radius or no rounded corners at all, and some of them even for purely practical reasons. (Function before design? What are they thinking )
However, the latter would solve all problems, which wouldn’t exist without rounded corners in the first place, some of which are unsolvable, because they would require a re-design of 3rd party apps. Not to mention that in five years or so, rounded corners probably will be out of fashion again… Just my 2 cents on the subject
Yes, I’m a dev and I’ve already encountered this issue on a project.
This is why I’ll be happy if I’m wrong and you provide a solution.
Sorry for not sending PR, I’m missing time to learn the code of NextCloud.
That’s just my opinion but Open Source is made for sharing opinions.
I stumbled upon a Reddit post that included some concrete examples (with screenshots) of rounded corner bugs that I would like to add to this discussion. As far as I can tell these rounded corner bugs didn’t get fixed in 25.0.1.