Popup with header and close button can't have rounded corners?

Popup with header and close button can't have rounded corners?

I think this might be a CSS bug in the popup styles.
The code is a slight variation on the popup samples in the documentation.
Put this HTML inside a page:

  1. <a href="#about" data-role="button" data-mini="true" data-rel="popup">About</a>
  2. <div data-role="popup" id="about" class="ui-popup">
  3.    <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="a">Close</a>
  4.    <div data-role="header">
  5.       <h1>About</h1>
  6.    </div>
  7.    <div data-role="content">
  8.       <p>Wibble!</p>
  9.    </div>
  10. </div>

Click the button, and notice that the popup header has square top corners (which stick through the rounded corners of its container). There's a style which applies to .ui-popup.ui-corner-all > .ui-header:nth-child(2) which sets border-radius back to 0; if you override it by putting style="border-top-left-radius:inherit;" on the header, then the rounded corners come back again.

Is this a bug in the CSS, or am I doing something wrong?


Matt