Question

Round corner tab in jQuery Mobile

I have come across navbar in jquery mobile which can be used as tabs.

http://jquerymobile.com/test/docs/toolbars/docs-navbar.html

However my requirement is to use round cornered tabs like the we have in general jQuery.

http://jqueryui.com/demos/tabs/

I need round corner tabs in jQuery mobile. Is there any way to use css such a way that the navbar can be changed to round cornered tabs ?

Also my requirement is to have the selected tabs connected to its corresponding div as it is in the above jquery example to give a look and feel of real tabs instead of mere buttons.

Answer 1

Adding this to your CSS should do it:

.ui-btn {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}