How to remove round corners in jQuery Mobile?

Question

How to remove the round edges (border-radius) from the particular element or from div tag that is using jQuery Mobile?

Answer 1

Talking about buttons, you can apply following option to a button.

data-corners="false"

A code goes like this:

<a href="#" data-role="button" data-corners="false">push me</a>

The document is here: http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

Thanks.

Answer 2

In the jQuery mobile CSS file linked here, search for this string:

.ui-corner-tr {

I don't know if you're even using the default styles, but there's what I found based on the info you provided.

You should be able to change all four corners in that area (as .ui-corner-tr, .ui-corner-tl, .ui-corner-br, .ui-corner-bl, etc., etc.)