jQuery Mobile 1.4 Rounded Button Corners - Set individual corners?

Question

Not that I've found anything in the documentation but wondered if anyone knew about setting corner rounding individually for extra styling?

The documentation states: class="ui-btn ui-corner-all" which indicates to me that setting individual corners might be possible now or in the future else wouldn't it have been easier to have class="ui-btn ui-corner".

Anyone else achieved this for top corners or just left side corners only?

Answer 1

jQM just uses plain CSS to style the buttons, therefore, you simply create your own CSS rules for the corners you want and apply them to the buttons:

.topCornersOnly {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.leftCornersOnly {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

<a href="#" class="ui-btn topCornersOnly">Anchor</a>
<a href="#" class="ui-btn leftCornersOnly">Anchor</a>

DEMO