title: Position of the title in Group Box
body: <p>I have a Group Box as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/gdmpL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gdmpL.png" alt="enter image description here"></a></p>
  
  <pre><code>QGroupBox{
      background-color: #000044;
      font: 12px consolas;
      color: cyan;
  }
  </code></pre>
  
  <p>I wish the border to be more bluish, and then I get:</p>
  
  <p><a href="https://i.stack.imgur.com/vV62L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vV62L.png" alt="enter image description here"></a></p>
  
  <pre><code>QGroupBox{
      border: 1px solid cyan;
      background-color: #000044;
      font: 12px consolas;
      color: cyan;
  }
  </code></pre>
  
  <p>The title is not centered with the top border of the Group Box and I do not know how to do it.</p>
  
  <p><strong>EDITED:</strong></p>
  
  <p>The possible solution proposed by ekhumoro does not work. I miss the upper-left corner.</p>
  
  <p><a href="https://i.stack.imgur.com/DufL5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DufL5.png" alt="enter image description here"></a></p>
  
  <pre><code>QGroupBox{
      border: 1px solid cyan;
      background-color: #000044;
      font: 12px consolas;
      color: cyan;
      margin-top: 0.5em;
  }
  
  QGroupBox::title {
      padding-top: -16px;
      padding-left: 8px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/moQNw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/moQNw.png" alt="enter image description here"></a></p>
  
  <pre><code>QGroupBox{
      border: 1px solid cyan;
      background-color: #000044;
      font: 12px consolas;
      color: cyan;
      margin-top: 0.5em;
  }
  
  QGroupBox::title {
      background-color: transparent;
      padding-top: -16px;
      padding-left: 8px;
  }
  </code></pre>