Setting rounded corners on the Xfce panel
Reuben James (ruenoak)
v1.0, 13 April 2024
---
This documents describes how to set rounded corners in the Xfce panel. This tutorial is based on Xfce-4.18 on Debian 12 (Bookworm).
1. Introduction
The Xfce panel can be customised using CSS, in this tutorial we will be working with basic CSS code, basic commands and hidden files and folders in the home directory of the Linux system.
2. Setup
On your Linux system open your file manager, the default file manager in Xfce is called Thunar.
In your file manager you will need to show hidden files and folders, there are two ways you can do this
- Select View - Show Hidden Files
- On your keyboard hit CTRL H to toggle Hidden files and folders on and off.
Now you should see Hidden files and folders in your home directory.
These are noted with a period (.) in front of the file or folder.
In your home folder navigate to a folder called .config, this folder is where applications save their settings, this is not the only folder for application settings but is generally the default.
In the .config folder navigate to a folder called 'gtk-3.0'. If this folder does not exist you can create it by right clicking in the free space and selecting 'Create Folder' make sure you name it exactly as written 'gtk-3.0' without quotes.
In the the gtk-3.0 folder we will create a file called 'gtk.css'. To create a css file you can either right click in an empty space in the manager and select 'Create Document - Empty File' This will open a default empty file in a text editor, Xfce's default text editor is Mousepad.
In the text editor select File Save or CTRL S and save the file as 'gtk.css'. Now we have our CSS file ready to edit.
3. CSS code
Below is the code we will use to set rounded corners on the Xfce panel. You can copy and paste this code into the 'gtk.css' file and save the file. In this example the radius is set to 5 pixels you can experiment by changing these values.
/* Xfce Panel configuration */
#XfcePanelWindow {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
4. Commands
After saving the gtk.css file, Open up a terminal and type 'xfce4-panel -r' to refresh the panel. You should now see that your panel has rounded corners.
[Tip:] On some systems you may notice a padding issue around the rounded corners where it slightly cuts off the text or icons.
To fix this issue add a spacer to each end of the panel and make it transparent.
5. References
---