Change header background color of modal of twitter bootstrap

Question

I am trying to change the background color of modal header of twitter bootstrap using following css code.

.modal-header
 {
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 }
 .modal-header .close{margin-top:2px}
 .modal-header h3{margin:0;line-height:30px}

But this code makes the corner of the modal header angular. Before using above code corners were round shaped. How can I get round shaped corner of modal header with the above background color ?? Thanks

Answer 1

You can use the css below, put this in your custom css to override the bootstrap css.

.modal-header {     padding:9px 15px;     border-bottom:1px solid #eee;     background-color: #0480be;     -webkit-border-top-left-radius: 5px;     -webkit-border-top-right-radius: 5px;     -moz-border-radius-topleft: 5px;     -moz-border-radius-topright: 5px;      border-top-left-radius: 5px;      border-top-right-radius: 5px;  } 

Answer 2

So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).

My solution:

.modal-body {     background-color: #FFFFFF; }  .modal-content {     border-radius: 6px;     -webkit-border-radius: 6px;     -moz-border-radius: 6px;     background-color: transparent; }  .modal-footer {     border-bottom-left-radius: 6px;     border-bottom-right-radius: 6px;     -webkit-border-bottom-left-radius: 6px;     -webkit-border-bottom-right-radius: 6px;     -moz-border-radius-bottomleft: 6px;     -moz-border-radius-bottomright: 6px; }  .modal-header {     border-top-left-radius: 6px;     border-top-right-radius: 6px;     -webkit-border-top-left-radius: 6px;     -webkit-border-top-right-radius: 6px;     -moz-border-radius-topleft: 6px;     -moz-border-radius-topright: 6px; } 

!! CAVEAT !!

You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:

<div class="modal-header bg-primary">  <div class="modal-body bgColorWhite">  <div class="modal-footer bg-info"> 

EDIT

Or even better:

<div class="modal-header alert-primary"> 

Answer 3

The corners are actually in .modal-content

So you may try this:

.modal-content {
  background-color: #0480be;
}
.modal-body {
  background-color: #fff;
}

If you change the color of the header or footer, the rounded corners will be drawn over.