Rounded Corners May Just Be What Windows 10 Needs
App windows have new features like rounded corners and a menu with snap layouts that your app will automatically receive in most cases. If you've customized your window or title bar, you might need to do some work to make sure these new features are supported.
Rounded Corners May Just Be What Windows 10 Needs
We rounded the corners of window borders in Windows 11. Our user research team found that rounded geometry psychologically provides a feeling of safety and makes the app's UI much easier to scan. This makes users feel less intimidated and the app feel more engaging. The amount of rounding was also carefully chosen. We worked across the company and user research to balance between feeling professional and being softer and more inviting.
Open a new PowerPoint presentation. Using the Insert tab on the main menu bar, click on Shapes and then Rectangles, and choose Rectangle: rounded corners.
The latest round of leaks reveals more of the Windows 10X Sun Valley Update and its new Action Center (notification center) redesign, as well as new images of the upcoming app dialog box with rounded corners.
Roughly two weeks ahead of its Build 2021 developer conference, Microsoft accidentally shared a screenshot of an upcoming feature for developers. In a blog post for developers, Microsoft accidentally posted a screenshot of Windows apps dialog box with rounded corners.
It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.
table border-collapse: separate; border-spacing: 0; width: 100%; table td, table th border-right: 1px solid #CCC; border-top: 1px solid #CCC; padding: 3px 5px; vertical-align: top; table td:first-child, table th:first-child border-left: 1px solid #CCC; table tr:last-child td, table tr:last-child th border-bottom: 1px solid #CCC; table thead + tbody tr:first-child td border-top: 0; table thead td, table th background: #EDEDED; /* complicated rounded table corners! */ table thead:first-child tr:last-child td:first-child border-bottom-left-radius: 0; table thead:first-child tr:last-child td:last-child border-bottom-right-radius: 0; table thead + tbody tr:first-child td:first-child border-top-left-radius: 0; table thead + tbody tr:first-child td:last-child border-top-right-radius: 0; table tr:first-child td:first-child, table thead tr:first-child td:first-child border-top-left-radius: 5px; table tr:first-child td:last-child, table thead tr:first-child td:last-child border-top-right-radius: 5px; table tr:last-child td:first-child, table thead:last-child tr:last-child td:first-child border-bottom-left-radius: 5px; table tr:last-child td:last-child, table thead:last-child tr:last-child td:last-child border-bottom-right-radius: 5px; Table Head Table Data
Here is a recent example of how to implement a table with rounded-corners from -ui-kit/demo.html. It's based on the special selectors suggested by Joel Potter above. As you can see, it also includes some magic to make IE a little happy. It includes some extra styles to alternate the color of the rows:
Some of the other answers are good, but none of them consider you using thead, tbody and tfoot. Or cases, when you can either combination of those. And when you apply them, you can get some unnecessary rounding or borders.Thus I tried adjusting css-only answer from @NullUserException and this is what I got:
But thanks for your effort in giving us ex-Freehanders a library of rounded corner styles until Adobe gets their act together and allows all of us to selectively apply rounded corners in AI, without all of the tedious workaround and frustration.
Why take all these steps to add multiple fills and transformations when you can just simply draw a rounded rectangle and then just attack the sides with an Erase marquee? Done in a few seconds and then you can add that as a Graphic Style.
The churn in methodologies and libraries is real, coupled with utter lack of messaging around what is the one true approach, and at this point I am just tired. Instead of focusing on adding value to my app users, I need to spend days fighting Windows APIs on the off chance that I picked the wrong .NET type of framework to build my app with. I should just write everything in C++ using the lowest level of APIs possible to make sure that I am not painting myself into a corner.
Apart from the rounded corners, the most striking visual difference in Windows 11 is the updated taskbar and Start menu. Taskbar icons are now centrally aligned by default. This can be changed to left alignment if you wish.
When using Windows 11 in tablet mode, the desktop looks the same but with just a bit more space between icons on the taskbar to make Windows 11 more touch friendly. And there are bigger touch targets and visual cues to make moving and resizing windows easier.