Bottom windows corner visual issue on some apps

[bluebyt]

I have a visual issue at the bottom corners on some apps like Firefox, totem, xfce4-terminal and more ... As you can see on the screenshot.

xfce4-terminal

Firefox

[CoolAller]

Hi! I think the best solution here would be to completely remove the window border, because there are GTK3 applications with edges rounded on all sides, and there are GTK3 applications that only have rounded edges on top and sharp bottom edges.

If you fix this problem for GTK3 applications with sharp bottom edges, then other GTK3 applications with rounded edges on all sides will not look the best.

This can be seen, for example, if you run the gnome-calculator application, which has all edges rounded, and the Celluloid application, which has sharp bottom edges.

In any case, you need to fix these lines in the gtk.css (GTK3):

/**********************
 * Window Decorations *
 **********************/
decoration {
  transition: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
  border-radius: 14px;
  border: 2px solid #E0E0E0;
  background-clip: border-box;
  margin: 10px;
}

decoration:backdrop {
  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
  border: 2px solid #E0E0E0;
  background-clip: border-box;
}

You can set the following values:

border-radius: 14px 14px 0px 0px;

Then the Celluloid application will look good, but the gnome-calculator application will have problems with the bottom corners, since they are made rounded in the application itself.

It seems to me that the best solution would be to completely remove the window border:

/**********************
 * Window Decorations *
 **********************/
decoration {
  transition: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
  border-radius: 14px;
- border: 3px solid #E0E0E0;
  background-clip: border-box;
  margin: 10px;
}

decoration:backdrop {
  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
- border: 3px solid #E0E0E0;
  background-clip: border-box;
}

[bluebyt]

I see, this is more a problem with Gnome applications then with the theme itself, I will try both solution and see which one is better, thanks for the quick reply!

[swomf]

Depending on your use case, you might disable corner rounding and keep the white border. For example, KDE users here from vinceliuice/Graphite-kde-theme might only see the issue in Firefox.

In this case, you can edit the following (I'm using the GTK theme Graphite-dark-compact so it is in gtk-dark.css)

• * Header bars * ➔ .titlebar {
• * Window Decorations * ➔ decoration {

/***************
 * Header bars *                                          (after some scrolling)
 ***************/

 .titlebar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   background-color: #0F0F0F;
   color: white;
-  border-radius: 12px 12px 0 0;
+  border-radius: 0px 0px 0 0;
 }

/**********************
  * Window Decorations *
  **********************/
 decoration {
   transition: none;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
-  border-radius: 14px;
   border: 2px solid #E0E0E0;
   background-clip: border-box;
   margin: 10px;
 }

Result:

(Of course, KDE Firefox users can also use Customize Toolbar ➔ Title Bar)

[CoolAller]

swomf It won't work that way. Gnome GTK-3 applications will have problems with interface corners.

[swomf]

What if, instead of using border-radius and border to outline borders, we use a box-shadow? I think other themes do that to have thin black borders on their windows.

~/.themes/Graphite-Dark-compact/gtk-3.0/gtk-dark.css

 /**********************
  * Window Decorations *
  **********************/
 decoration {
   transition: none;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 50
px transparent;
-  border-radius: 14px;
-  border: 2px solid #E0E0E0;
+  border-radius: 12px 12px 0 0;
+  border-width: 0px;
   background-clip: border-box;
+  box-shadow: 0 3px 12px 1px transparent, 0 2px 6px 2px rgba(255, 255, 255, 0.14), 0 0 0 2px shade(mix(white,white,
0.85),0.7);
   margin: 10px;
 }

  decoration:backdrop {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 50px transparent;
-  border: 2px solid #E0E0E0;
+  box-shadow: 0 3px 12px 1px transparent, 0 2px 6px 2px rgba(255, 255, 255, 0.14), 0 0 0 2px shade(mix(white,white,0.85),0.7);
   background-clip: border-box;
 }

Note that some other box-shadow elements will have to be replaced accordingly, since we're sacrificing the old borders for a box-shadow border.

 /************
  * Chromium *
  ************/

 window.background.chromium decoration {
   background-clip: padding-box;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 10px 18px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 12px 1px transparent, 0 2px 6px 2px rgba(255, 255, 255, 0.14), 0 0 0 2px shade(mix(white,white,
0.85),0.7);
 }

Appearance:

[CoolAller]

swomf Changing the order of addends does not change the sum, in our case - the result :)

If set border-radius: 12 12 0 0, then it is assumed that the bottom corners of the applications are sharp, but in the case of Gnome3 applications, they have rounded corners at the bottom. As a result, you will get the same result as in my screenshot above. Remove the border, it is not needed.

One of the problems with numerous Linux Desktop Environments is the lack of standardization of the interface, hence the problems with themes.

[swomf]

But I love the border CoolAller!

Buuut you're right. Different applications in different desktop environments will react differently to any tweaks we make, whether we want a round corner, or a not-round corner, especially when an application optimized for one DE is used in another DE. However, the box-shadow tweak does help with some DEs, especially in the major app Firefox. So it's worth consideration despite its assumption about borders.

For instance, when using the box-shadow hack on Ubuntu 22.04 LTS (GNOME):

• XFCE Terminal (not GNOME) was unfixable with or without it
• non-snap Firefox couldn't be fixed by the tweak; I had to use Firefox's about:config -> widget.gtk.rounded-bottom-corners.enabled and restart the app
• I couldn't replicate the gnome-calculator issue. Hopefully it was fixed?

When using the box-shadow hack in ArchLinux KDE and also XFCE:

• Firefox was fixed, with or without about:config -> widget.gtk.rounded-bottom-corners.enabled
• I couldn't find anything else, since gnome-calculator didn't want to use the theme at all.

When using the box-shadow hack in Linux Mint Cinnamon Edition:

• Firefox is fixed, but only without using the bottom corner rounding option in about:config (different from GNOME earlier)
• Chromium gets glitched around the bookmarks bar area
• I couldn't find anything else before after Enabling bottom corner rounding in Firefox here will reveal the issue you predicted of my assumption.

In summary, I think the box-shadow edit could help people keep the pretty GTK border. ^_^

[CoolAller]

swomf The main thing is that you are satisfied with how your Desktop looks. Anyway, in the case of Linux Desktop Environments, you always have to make some compromises. As far as I know, you can specify the design for a specific application in the theme. I think vinceliuice could tell how he does it. To be honest, I don’t use this theme, I just answered the question from bluebyt :)