Search code examples
csstwitter-bootstrapbootstrap-modal

Change header background color of modal of twitter bootstrap


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


Solution

  • 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;
     }