Button border radius in jQuery mobile 1.4.0

Question

I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..

<div   class="ui-btn ui-input-btn  center_BTN " >                                                   
<input type="button" id="save" data-inline="true" value=" Save"  data-icon="check"      />

</div> 

CSS

.center_BTN {
  text-align:center;
  background-color:transparent !important;
  border:none;
}


.center_BTN.ui-btn,.center_BTN .ui-input-btn{

  border: solid #cccccc 5px;
  border-radius:32px !important;

}

Answer 1

Update

jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.

<input type="button" data-wrapper-class="foo" />

Demo

---

Old answer

jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.

Create a custom class with all your CSS and add it after page is created.

$(".selector").closest("div").addClass("custom-class");

Demo

Answer 2

Rounded rectangle button

.ui-btn-corner-all {
   border-radius: 1m;
}

Rectangle button

.ui-btn-corner-all {
   border-radius: 0m;
}