How to get reverse rounded corners for QTabWidget using stylesheets?

[montylee]

I want to get the tab look and feel provided by the latest version of Opera i.e. Opera 10. Here's a screenshot of Opera 10 tabs (it may be same in Opera 9 too):



As you can see, there is some space between the tabs and the corners of tabs are rounded. In addition the rounded corners at the bottom left and bottom right of the tabs are reverse i.e. they are inclined out.

I modified the tabdialog example of Qt and came up with this:



I am using the following style sheet for the above look:

QTabWidget::pane { /* The tab widget frame */
    border-top: 6px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #FFE085, stop: 0.8 #CC9900); /* Width of the line below the tab panel */
}
 
QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}
 
/* Tab properties */
QTabBar::tab {
    border: 1px solid #000000;
    border-top-left-radius: 4px; /* For rounded corners */
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px; /* Padding inside each tab */
    margin-left: 4px; /* Margins among the tabs */
    margin-right: 4px;
}
 
/* Properties for selected tab */
QTabBar::tab:selected {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085);
    border-color: #000000;
    border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
}
 
/* Properties for unselected tabs */
QTabBar::tab:!selected {
    background: #C2C7CB; /* Gray color for unselected tabs */
    border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
    margin-top: 4px; /* make non-selected tabs look smaller */
}
 
QTabBar::tab:first:selected {
    margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
 
QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

QTabWidget::pane { /* The tab widget frame */
    border-top: 6px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #FFE085, stop: 0.8 #CC9900); /* Width of the line below the tab panel */
}

QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}

/* Tab properties */
QTabBar::tab {
    border: 1px solid #000000;
    border-top-left-radius: 4px; /* For rounded corners */
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px; /* Padding inside each tab */
    margin-left: 4px; /* Margins among the tabs */
    margin-right: 4px;
}

/* Properties for selected tab */
QTabBar::tab:selected {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085);
    border-color: #000000;
    border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
}

/* Properties for unselected tabs */
QTabBar::tab:!selected {
    background: #C2C7CB; /* Gray color for unselected tabs */
    border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
    margin-top: 4px; /* make non-selected tabs look smaller */
}

QTabBar::tab:first:selected {
    margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}

QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

To copy to clipboard, switch view to plain text mode 

As you can see, i was able to put some space between the tabs and also got rounded corners. Now, i don't know how to get the reverse rounded corners at the bottom left and bottom right like the Opera tabs.

Anybody has a clue?

[montylee]

does anybody knows about it? I am pretty sure that there's a way since Opera (written in Qt) is doing it.

[aamer4yu]

May be they have subclassed the headerview

[Lykurg]

If you want to use style sheets then you could simply use images. For right scaling look in the docs for "QPushButton and images".

[montylee]

i was thinking of using images for tabs. Looks like there is no other way of doing this through style sheets.

Thanks for the help!

[Peter_APIIT]

How we can create a style sheet in Visual Studio ?

[montylee]

How we can create a style sheet in Visual Studio ?

you can create/write a style sheet in any editor i..e Visual Studio, Notepad etc.
it's just a text file.