Ahalya
Ahalya

Reputation: 21

How to round the borders of a QWebEngineView widget?

I'm trying to round the borders of a QWebEngineView widget, i have tried using stylesheet but the borders ain't changing.

Default:

current

I modified the borders on photoshop to demonstrate what we are trying to achieve:

desired

#include <QtWidgets>
#include <QWebEngineView>
#include <QWebEngineScript>
#include <QWebEngineScriptCollection>
#include <QQuickWidget>

class Widget : public QWidget
{
    Q_OBJECT
public:
    QWebEngineView* view = nullptr;
    Widget() : QWidget(nullptr)
    {
        QWidget* widget = new QWidget;
        widget->setObjectName("webEngineWidget");
        view = new QWebEngineView;
        view->setUrl(QUrl("https://www.google.com"));
        view->setAttribute(Qt::WA_StyledBackground);
        view->setContentsMargins(32, 32, 32, 32);
        view->page()->setBackgroundColor(Qt::transparent);
        QQuickWidget* quickWidget = view->findChild<QQuickWidget*>();
        quickWidget->setAttribute(Qt::WA_StyledBackground);
        quickWidget->setContentsMargins(32, 32, 32, 32);

        QGridLayout* layout = new QGridLayout(widget);
        layout->setContentsMargins(32, 32, 32, 32);
        layout->addWidget(view);

        QHBoxLayout* mainLayout = new QHBoxLayout(this);
        mainLayout->addWidget(widget);

        setStyleSheet(R"(
#webEngineWidget
{
    background-color: gray;
    border: 4px solid red;
    border-radius: 32px;
}

QWebEngineView
{
    background-color: green;
    border: 4px solid yellow;
    border-radius: 32px;
}

QWebEnginePage
{
    background-color: blue;
    border: 4px solid green;
    border-radius: 32px;
}

QQuickWidget
{
    background-color: yellow;
    border: 4px solid black;
    border-radius: 32px;
}
        )");
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

This is a minimal example, the borders are just to illustrate what the stylesheet are changing.

What else we could try? the goal is to create the rounded widget to fit on our main window.

Upvotes: 2

Views: 100

Answers (0)

Related Questions