PyQt5 QProgressBar border radius issue

Question

I made a progress bar in PyQt5 designer with the following stylesheet:

border: 2px solid black;
border-radius: 20px;

but there seems to be a graphical glitch where the bar does not round and the text is misaligned.

is this a known issue?

A .ui file if needed, could be easily replicated by dragging a progress bar in designer and using the stylesheet above.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>289</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QProgressBar" name="progressBar">
    <property name="geometry">
     <rect>
      <x>90</x>
      <y>110</y>
      <width>201</width>
      <height>61</height>
     </rect>
    </property>
    <property name="styleSheet">
     <string notr="true">border: 2px solid black;
border-radius: 20px;</string>
    </property>
    <property name="value">
     <number>24</number>
    </property>
    <property name="textVisible">
     <bool>true</bool>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>26</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>

Answer 1

You have to set the border radius on the QProgressBar chunk. I am not certain how it's done in .ui file but using qss it looks like this:

QProgressBar {
  border: 2px solid black;
  border-radius: 20px;
  text-align: center;   
}
QProgressBar::chunk {
  border-radius: 5px; 
}

check out https://doc.qt.io/qt-6/stylesheet-examples.html#customizing-qprogressbar for other ways to customize the progress bar examples.