Search code examples
qtqtstylesheetsqtabwidget

Customizing QTabWidget with Style Sheets

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

enter image description here

The problem is: if I set style sheet 

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

then it looks like this:

[qt can do][2].

Solution

  • 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; 
}