Customizing QTabWidget with Style Sheets

Question

How can I style QTabWidget like is in the image below.

The problem is: if I set style sheet

QTabWidget:pane {
border: 1px solid gray;
}

then it looks like this:

Dalpe

Isn't it as you expected to be? (the 2 images are the same) – Squally

Not the same. On the second image selected tabbar has an undesired bottom border. – Dalpe

Check this out: doc.qt.io/qt-5/… . Looks like you should be styling QTabBar. – Kernan

Also if you solve it yourself with that, please write an answer yourself :) – Kernan

Ok. Thank you for giving me right direction. Here is an aproximate style sheet. The key moment is QTabWidget::pane { top: -1px; }. It moves pane up (and it's top border) so it doesn't disturb, and QTabBar::tab {margin-bottom: -1px; } as well, it hides appearing tabbar bottom and pane top differences. – Dalpe

QTabWidget::pane { border: 1px solid lightgray; top:-1px; background: rgb(245, 245, 245);; } QTabBar::tab { background: rgb(230, 230, 230); border: 1px solid lightgray; padding: 15px; } QTabBar::tab:selected { background: rgb(245, 245, 245); margin-bottom: -1px; } – Dalpe

Answer 1

Reposting my comment. Here is the solution.

Ok. Thank you for giving me right direction. Here is an aproximate style sheet. The key moment is QTabWidget::pane { top: -1px; }. It moves pane up (and it's top border) so it doesn't disturb, and QTabBar::tab:selected {margin-bottom: -1px; } as well - it hides appearing tabbar bottom and pane top differences

QTabWidget::pane {
  border: 1px solid lightgray;
  top:-1px; 
  background: rgb(245, 245, 245);; 
} 

QTabBar::tab {
  background: rgb(230, 230, 230); 
  border: 1px solid lightgray; 
  padding: 15px;
} 

QTabBar::tab:selected { 
  background: rgb(245, 245, 245); 
  margin-bottom: -1px; 
}

Dalpe

The tab and pane seems not align, how to align them ? – Illustrious

@Wade Wang what do you mean exactly? – Dalpe

what i mean is like this : ibb.co/37q49LK, but i rechecked it, it is caused by its parent widget, i.e., this qtabwidget has a parent qtabwidget, and the parent qtabwidget set some stylesheet that makes the pane and tab unalign, then its children qtabwidget was affected. – Illustrious

Yes, if you set this stylesheet to clean QTabWidget, there will be no aligns. – Dalpe

*no aligns issues – Dalpe

Answer 2

Styling the tabwidget:

QTabWidget::tab-bar {
   border: 1px solid gray;
}

Styling tab:

QTabBar::tab {
  background: gray;
  color: white;
  padding: 10px;
 }

 QTabBar::tab:selected {
  background: lightgray;
 }

Styling Panel:

QTabWidget::pane { 
   border: none;
}

Example:

Paphos

But it still doesn't save us from the bottom line of the selected TabBar. This line is from the top pane border. – Dalpe

See the changes i made. Disable border, and custom the widget wich will be inside any tab. User: QTabWidget::pane { border: none; } – Paphos

I've tried this variant too. Even so, I need the whole pane border, except selected Tabbar. Thank you, but I've found the solution. I didn't know where to post, so I've posted it as comment to the first message, as was recommended by the help, so maybe it is badly visible. – Dalpe