header buttons are square rather than rounded

Question

I was expecting my buttons in the header to be rounded, but instead they are coming out square. See the home button in the screenshot:

My CSS:

#main {
   text-overflow: ellipsis;
   overflow: visible;
   white-space: normal;
}
a {
    text-decoration: none;
}
.ui-header .ui-title {
    overflow: visible !important; 
}
.ui-header {
    min-height: 40px;
}

The snipped of html declaring the header:

  <div data-role="page" id="settings">
       <div data-role="header" data-position="fixed">
          <a href="#home"  data-icon="home" data-iconpos="notext">Home</a>
          <h1>App</h1>
       </div>
       ...

I was expecting to see buttons round similar to these:

Any pointers appreciated ...

Answer 1

The problem was due to this line in my code:

$('a').buttonMarkup({ corners: false });

Removing that fixed the problem :$

Answer 2

For rounded corners, I'd expect something like:

#home {
border-radius: 5px;
}

Unfortunately, this is also something that varies between implementation of the CSS, so if this doesn't work, please provide more info on versions of tools you use.