Rounded side menu bar corner

Question

I'm developing a Qt widget application using C++. In my main window I have a QGridLayout that contains 3 main widgets: a header on top, a side menu on the left and a body on the right.

I mainly use QSS (stylesheets) to manage my interface, and I'd like to continue with this if possible. I'd like to make a rounded corner on my side menu like this:

How can I do this?

Answer 1

You can leverage the border-radius property. Here's a simple example of how you can do this:

#MySideMenu {
    border-radius: 9px;
}

Ensure that your side menu widget has an object name. You can set it like this in your C++ code:

sideMenu->setObjectName("MySideMenu");

---

To create an outer rounded corner effect, you can place your side menu inside a larger parent widget with more rounded corners.

1. Make a parent widget for your side menu and give it bigger rounded corners.

parentWidget->setStyleSheet("QWidget#ParentWidget { background: white; border-radius: 20px; }");
parentWidget->setObjectName("ParentWidget");

2. Give your side menu smaller rounded corners.

This will make it look like your side menu has an outer rounded corner. You can adjust how round the corners are to match your design. Remember, the parent widget's corners should be rounder than the side menu's to create this effect.

sideMenu->setStyleSheet("QWidget#SideMenu { background: #yourColour; border-radius: 15px; }");
sideMenu->setObjectName("MySideMenu");