title: bootstrap 3 modal header background color
body: <p>Hi I have a <code>bootstrap</code> modal that I want to set its <code>background-color</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/6VOLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6VOLb.png" alt="enter image description here"></a></p>
  
  <p>But I get a white space on the top corners:</p>
  
  <p><a href="https://i.stack.imgur.com/Xgadk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xgadk.png" alt="enter image description here"></a></p>
  
  <p>This is my style:</p>
  
  <pre><code>.modal.modal-alert .modal-dialog .modal-content {
    border-radius: 6px;
    padding: 0;
  }
  .modal.modal-alert .modal-dialog .modal-content .modal-header {
     padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #0480be;
      -webkit-border-top-left-radius: 6px;
      -webkit-border-top-right-radius: 6px;
      -moz-border-radius-topleft: 6px;
      -moz-border-radius-topright: 6px;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
  }
  .modal.modal-alert .modal-dialog .modal-content .modal-body {
    padding: 10px 0;
  }
  .modal.modal-alert .modal-dialog .modal-content .modal-footer {
    padding-top: 15px;
  }
  </code></pre>
  
  <p>The border radius must be 6px and its what I have.</p>
  
  <p>Here is the code: <a href="https://codepen.io/anon/pen/xgGvoP" rel="nofollow noreferrer">https://codepen.io/anon/pen/xgGvoP</a></p>
  
  <blockquote>
    <p>Any clue?</p>
  </blockquote>