2

I want to use a style sheet to make QWidget border look like brackets.

Screenshot

My reference is the Qt style sheet documentation, but how can I customize it to look like the one in the screenshot?

This is as far as I can get, showing only the left and right borders.

QWidget{
    border: 1px solid red;
    border-width: 0px 1px;
}

Can it be done with a pure style sheet?

0

3 Answers 3

3

The example in the screenshot in the question can only be achieved with an image AFAIK, even in a Web browser with full CSS support. With Qt you actually have three options of using a custom image behind/around your widget.

To whit: background-image, border-image, and image:

https://doc.qt.io/qt-5/stylesheet-customizing.html

There's an example for using border-image already here: https://doc.qt.io/qt-5/stylesheet-examples.html#qpushbutton-and-images

I like SVG images personally, so here's an example with a quick one I whipped up. This is using the image property to overlay a transparent, scalable SVG of the brackets. (Note that for the CSS to even apply to a button, the native border may need to be overridden like I have in the example.)

Enter image description here

// Requires Qt svg module, as in `QT += svg`.
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QDialog d;
    d.setLayout(new QVBoxLayout);
    QToolBar* tb = new QToolBar(&d);
    tb->setIconSize(QSize(48, 48));
    d.layout()->addWidget(tb);

    QIcon icon("./so-icon.svg");
    for (int i=0; i < 4; ++i)
        tb->addAction(icon, QStringLiteral("Action %1").arg(i));

    QToolButton *btn = qobject_cast<QToolButton*>(tb->widgetForAction(tb->actions().at(1)));
    btn->setStyleSheet(QStringLiteral(
        "QToolButton {"
            "border: none;"  // To override some styles like WindowsVista and Macintosh
            "image: url(./brackets.svg);"
        "}"
    ));

    return d.exec();
}

https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg

File brackets.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<path fill="#047F18" d="M12,44H4V4h8V0H0v48h12V44z"/>
<path fill="#047F18" d="M36,4h8v40h-8v4h12V0H36V4z"/>
</svg>
1

One possibility would be to use the CSS border-image Property.

The other possibility is to override the paintEvent method on your parent widget, calling the baseline class paintEvent get everything painted, and then paint the appropriate borders on top wherever you like.

2
  • 2
    Qt Style Sheet only supports css 2.1 so many of the css 3 features are not available in Qt.
    – eyllanesc
    Oct 18, 2019 at 22:07
  • 1
    There's an example of using border-image right in the CSS reference docs, and has been there as long as I can remember. Oct 19, 2019 at 0:50
0

One could use QLinearGradient to segment the top and bottom borders to 3 parts. Left and right get the color of the border, and the middle part gets the color of the widget background.

In this example stylesheet, green is the outer color, white is the inner.

background-color: rgb(255, 255, 255);
border: 5px solid qlineargradient(spread: pad,x1:0, y1:0, x2:1, y2:0, 
                                  stop: 0 green,
                                  stop: 0.2 green,
                                  stop: 0.21 white,
                                  stop: 0.8 white,
                                  stop: 0.81 green
                                  stop: 1 green);
border-left:  5px solid green;
border-right: 5px solid green;

There needs to be a small fraction separating them to achieve a solid color.

Here's how it looks:

Bracket background

The downside of this method, is that diagonal gap in each corner, which is caused by the borders not painted on top of each other, which makes it look segmented.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.