title: Rounded corners on bootstrap modal div
body: <p>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:</p>
  
  <pre><code>&lt;div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog ui-corner-all"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="productModalLabel"&gt;Product&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" id="contentDiv"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal" id="orderClose"&gt;Close&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" id="orderSave"&gt;Save Changes&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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?</p>