How to have a bar with rounded corners - bakkeby/dusk GitHub Wiki

A question that comes up from time to time is how can I get a bar with round corners?

The answer to that is that the picom compositor handles rounded corners very well, also when windows have basic X borders like in dusk.

Here I am using a bar with a bright orange bar border in order to demonstrate an effect when using rounded corners via picom.

Let's go through some of the basics.

In the picom configuration set a corner-radius to a suitable value. Maybe 15 will look alright.

#################################
#           Corners             #
#################################

# Sets the radius of rounded window corners. When > 0, the compositor will
# round the corners of windows. Does not interact well with
# `transparent-clipping`.
corner-radius = 15

The effect is that we end up with a bar with rounded corners, but there are still hard edges on the inside.

This is less noticeable when the bar border has the same colour as the rest of the bar, but the issue will still be there.

To be honest I am not entirely sure why this happens. This does not seem to happen for regular windows where the border ends up being smoothly rounded as well.

So let's try without the bar border then.

In config.h change the functionality setting by commenting out BarBorder.

//	|Status2DNoAlpha // option to not use alpha when drawing status2d status
//	|BarBorder // draw a border around the bar
	|BarPadding // add vertical and side padding as per vertpad and sidepad variables above

Recompile and restart and we get this.

That's a bit sharp, because we are using a corner radius of 15 surely.

Changing the picom corner-radius to 10.

corner-radius = 10

Now we get something that looks like this.

Better, but the bar is pretty thin and has a different feel compared to what we had at the start.

What if the bar is the same size as with the border, but is without the border?

At this point I opened one of the previous screenshots in Gimp and used the Measure Tool to work out that the bar height was 30 pixels with the border.

So I go to the bar_height setting in the config.h file and change the value from 0 to 30.

static const int bar_height              = 30;   /* 0 means derive from font, >= 1 explicit height */
static const int vertpad                 = borderpx;  /* vertical (outer) padding of bar */
static const int sidepad                 = borderpx;  /* horizontal (outer) padding of bar */

Recompile and restart and we get.

Seems alright, but the corners are a bit tight because we changed the corner radius to 10.

Changing the picom corner-radius back to 15.

corner-radius = 15

Now we get something that looks like this.

Seems like this may be a good start.

If I ever figure out the bar border issue then I'll come back and update this guide.

Tip: The class and instance of the bar is "dusk". You can double check this by running xprop and click on the bar.

$ xprop
WM_CLASS(STRING) = "dusk", "dusk"

You can use this in the picom configuration if you need to exclude the bar from having rounded corners, blurred backgrounds, or shadows.

Back to Guides.