.modal-header loses top left and right radius when new background is applied

Question

I am using bootbox.js to display some confirmation and error messages to my user.To do this I provide the className attribute to bootbox however I noticed that the top left and right radius of .modal-header dissapear when I apply a class that changes it background.Here is a jsfiddle

I know that I can solve it by adding a border-radius:5px 5px 0px 0px to .errorAlert .modal-header but I want to understand why this is happening in the first place.

In case you have problems with the link here is the minimum code to reproduce the issue:

HTML

<div class='btn btn-info' id = "simpleModal">
Show just a simple modal
</div>
<div class='btn btn-info' id="customClass">
Show a modal with a custom class
</div>

CSS:

.errorAlert .modal-header{
  background:red;
}

JavaScript:

$(function(){
  $("#simpleModal").on("click",function(){

    bootbox.alert({title:"Just a modal",message:"With no custom class"})
  })
  $("#customClass").on("click",function(){
    bootbox.alert({title:"Just a modal",message:"With .errorAlert class applied",className:"errorAlert"})
  })
})

Answer 1

That's because border radius in Bootstrap is applied to the .modal-content and by default .modal-header doesn't have a background. When you apply background to the modal header border radius disappears because you cover them by that red background of modal header which doesn't have border radius.