QSplitter show a divider or a margin between the two widgets

Style sheets are a powerful mechanism for changing the appearance of any widget in Qt.

See here for a quick tutorial, and here for a reference guide. Style sheets can be assigned using an editor in the Designer, or passed as a string using setStylesheet(QString). It is certainly easier using the Designer because then you can see what your widget will look like before running it.

Now, for your specific problem. A QSplitter is essentially a QFrame. But it also includes a handle - as you know. So typically that is what is usually styled.

So, for example you can do this:

QSplitter::handle {
         image: url(:/images/splitter.png);
     }

Which provides an image for the splitter handle. This is a bit similar to what is done under Motif, where there is a little rectangular handle always shown that the user can click on to move the splitter.

With a little experimentation you can create a cool separation line for your handle.

QSplitter::handle {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, 
stop:0 rgba(255, 255, 255, 0), 
stop:0.407273 rgba(200, 200, 200, 255), 
stop:0.4825 rgba(101, 104, 113, 235), 
stop:0.6 rgba(255, 255, 255, 0));
    image: url(:/images/splitter.png);
     }

Or something more drawn like this one.

QSplitter::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
    stop:0 #eee, stop:1 #ccc);
border: 1px solid #777;
width: 13px;
margin-top: 2px;
margin-bottom: 2px;
border-radius: 4px;
}

For this last one, we specifically only override the horizontal splitter, because of some of the properties - like margin-top and bottom, and width that would need to be different if we were changing the vertical splitter.

Hope this helps. Once you start playing with Style sheets the fun really begins.

The QSplitter has a handleWidth property you can set.