Search code examples
csspyqt5

Unable to set up transparent background for QDialog rounded corners

This is my Qt5 UI.

enter image description here

This is Qt5 UI's hierarchy tree.

enter image description here

The problem is about these rounded corners - they are semi-transparent

On a preview mode of Qt Designer, they're going into darker version.

I'm trying to make them fully transparent, I've done it before and had to deal with similiar issue, only then this was a hierarchy issue (some 'higher' layers were implementing theirs styleSheet).

There's my styleSheet CSS code:

[...]

QDialog 
{
    background: purple;
    border: 6px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
    background-clip: padding-box;
}

[...]
Solution

  • @musicamante

    "The fact is that by setting the background for the QDialog you're also setting the background on which draw what's around its borders. Instead, you should set a main layout, add a simple container widget, create a further layout for that container to which the actual content will be added and use a proper selector for that widget (eg. QDialog > QWidget { border: ... })"

    [...]

QDialog
{
    background: transparent;
}
QDialog > QWidget
{
    background: purple;
    border: 6px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
}

[...]

    NOTE

    I got it black instead of transparent because I had turned off XFCE composition.

    When I turned it ON it works as desired and described in this question.