CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Michael Mahony
Michael Mahony

Reputation: 1350

Rounded corners on bootstrap modal div

I have a .NET page that is using some Bootstrap markup to create a div that is later used as a popup modal. I want to round the corners. While modifying the CSS seems to effect the border width and color, I cannot make border-radius work. Here is my HTML:

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog ui-corner-all">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="productModalLabel">Product</h4>
                </div>
                <div class="modal-body" id="contentDiv">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="orderClose">Close</button>
                    <button type="button" class="btn btn-primary" id="orderSave">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

My JQuery calls a webservice that builds HTML and inserts int into #contentDiv and that works just fine. Here is my CSS for the rounded corners:

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


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

.modal-dialog {
    border: 3px solid #000000;
    width: 900px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
     border-radius: 100px;
}

Why won't border-radius work? I have changed the number to some drastic things to see if it makes a difference but nothing changes. As stated, I can change anything in the border reference or the width reference and see the changes, so it is seeing the .modal-dialog class. any ideas here?

Upvotes: 3

Views: 19878

Answers (1)

Michael Mahony
Michael Mahony

Reputation: 1350

The answer was actually obvious but I was NOT thinking clearly. All I had to do was add !important after each line because the bootstrap.css was taking precendence. Once I added !important the problem was solved instantly. Just thought I would add this in case someone else has this problem in the future.

Upvotes: 4

Related Questions