Search code examples
qtqlineeditqtstylesheets

Style Sheet for rounded corners on QLineEdit content?

I'm using Qt style sheets to create a custom QLineEdit that has a light blue border around it when it has focus. Here is the style sheet :

    this->setStyleSheet(" QLineEdit { "
                        " border-radius: 4px; "
                        " color:rgb(0, 0, 0); "
                        " background-color: rgb(255, 255, 255); } "

                        " QLineEdit:focus { "
                        " border-style:outset; "
                        " border-width:4px; "
                        " border-radius: 4px; "
                        " border-color: rgb(41, 237, 215); "
                        " color:rgb(0, 0, 0); "
                        " background-color: rgb(150, 150, 150); } "
                   );

And here is the result:

enter image description here

This looks pretty good, but is there any way to round the corners of the QLineEdit content area? The light gray region in the above image?

More specifically, can this be down with Qt style sheets?

Solution

  • border-radius should be bigger then border-width at least 4-5 px. Try following:

    this->setStyleSheet(" QLineEdit { "
                        " border-radius: 8px; "
                        " color:rgb(0, 0, 0); "
                        " background-color: rgb(255, 255, 255); } "

                        " QLineEdit:focus { "
                        " border:4px outset; "
                        " border-radius: 8px; "
                        " border-color: rgb(41, 237, 215); "
                        " color:rgb(0, 0, 0); "
                        " background-color: rgb(150, 150, 150); } "
                   );

    Looks like:

    enter image description here