jQuery Mobile 1.4 Rounded Button Corners - Set individual corners?

StackOverflow https://stackoverflow.com/questions/23627787

  •  21-07-2023
  •  | 
  •  

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?

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top