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."
The NC25 redesign is a great leap in the right direction and looks wonderful. Rounded corners could profit a lot from switching to squircles in the next iteration IMO.
@samb92 yep, I know this article very well! The issue is that unfortunately, I donât know that CSS supports this in an easy, standardized, and cross-platform manner (but I might be missing something).
As soon as there is support for this, we would totally update.
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:
it would be great major UI changes are not âone-wayâ but there is always an option to retain âpreviousâ view. Lot of of people (including me) donât like rounded corner, round images etc.
Please pay attention to
and let the users to decide which style is preferred.
Based on telemetry you could stop support for unpopular designs later.
@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
As a developer, I look forward to the solutions you will propose to solve the problem of scrollbars and applications such as draw.io.
I hope Iâm wrong but I feel like itâs a dead end.
@just
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.
Hi there,
Iâve just upgraded to 25 and was a bit surprised as this new âinsideâ rounded corner makes this whole thing look unbalanced to me. For two reasons:
First it looks like applications are not fitting anymore with it, as they are cut off at the corners
Second the browser window is not round, so this whole inner frame looks like obscuring the view on the apps. Itâs like rectangle-round-rectangle (the âinside appâ which is still with rectangle layout, as there is no distance to these round corners)
Is there anyway to switch that back to the previous version or is there something planned like this anytime soon?
Reason for the question is, if it is worthwhile to restore back to 24 or if there will be a solution to this issue anytime soon.
see my post above - good reference provided to âundoâ rounded corners. unfortunately rounded corners are en vogue now for some reason - donât expect them to disappear quickly from official design.
I have no problem with round corners
as long as Unrounded Corners is kept up-to-date
as mentioned above, I think user deserves to have to choice ((without any plugin) and on top of the round question, I wonder who came with this idea to reduce the display with that thin line all around the main frame âŚ
The issue is that unfortunately, I donât know that CSS supports this in an easy, standardized, and cross-platform manner (but I might be missing something).
See 
) 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 