CODEWITHSUNDEEP
jquerycssjquery-mobile
Andree
Andree

Reputation: 1199

How to add corners to horizontal tab bar in jQuery Mobile

How can I add round corners to the horizotal tabs in jQuery Mobile 1.4? Despite the ui-corner-all class is already present and the UL element has set border radius, the corners are still without the radius. On vertical list the radius works, but not here.

You can test it directly on the official page.

Upvotes: 0

Views: 146

Answers (3)

Kawinesh S K
Kawinesh S K

Reputation: 3220

CSS

.ui-link.ui-btn.ui-tabs-anchor{
    border-radius: 10px;
}

DEMO

If you just want the first and last to be rounded

li:first-of-type .ui-link.ui-btn.ui-tabs-anchor{
    border-top-left-radius:10px;
    border-bottom-left-radius:10px
}

li:last-of-type .ui-link.ui-btn.ui-tabs-anchor{
    border-top-right-radius:10px;
    border-bottom-right-radius:10px
}

DEMO

Upvotes: 1

Mateusz Cisowski
Mateusz Cisowski

Reputation: 11

Try:

.ui-navbar li:first-child a {
  border-radius: 10px 0 0 10px;
}
.ui-navbar li:last-child a {
  border-top-right-radius: 0 10px 10px 0;
}

Upvotes: 1

user4727957
user4727957

Reputation:

adding this should do the trick 

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

Upvotes: 0

Related Questions