Styling Twitter Bootstrap Modal Close Icon

Question

I'm trying to do some styling on Twitter Bootstrap modal close icon. This is the CSS I'm using:

.modal-header .close {
    float: right !important;
    margin-right: -30px !important;
    margin-top: -30px !important;
    background-color: white !important;
    border-radius: 15px !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
}

It works pretty good on Chrome / IE, however sometimes on Firefox I get strange behavior (image is attached). Is there additional CSS rule that I have to supply to have this work on Firefox as well?

Answer 1

Depending on the version of firefox you may need to add -moz-border-radius: 15px

Answer 2

This proved to be an issue with graphic card(s) on several laptop(s) that were using Intel graphics. Funny thing is that only Firefox was susceptible to this problem.