jQuery UI: How to customize buttonset corners?

Question

Like the image below, how can I customize the corner of the radio buttonset of jQuery UI? Instead of have a round corner at right side of a button, how can I customize it and make it has rounded-corner at the bottom?

Thanks for your help!

Answer 1

Use following jQuery after your jQuery UI script

for following example

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
  </div>

use this script

 // select last radio label
    var radio = $( "#radio" ).find('label').last();

    //update border radius
    $(radio).css('border-radius','0px 0px 4px 4px');

Answer 2

jQuery UI framework solution:

• Locate the first (and last control) in the buttonset
• Remove the classes ui-corner-left (and ui-corner-right)
• Add the classes ui-corner-top (and ui-corner-bottom)

Demo here

Answer 3

In jQuery UI CSS, change your button which has :

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

to

.ui-corner-left, .ui-corner-right {
    border-bottom-right-radius: 4px;
}