Reputation: 1199
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
Reputation: 3220
CSS
.ui-link.ui-btn.ui-tabs-anchor{
border-radius: 10px;
}
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
}
Upvotes: 1
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
Reputation:
adding this should do the trick
.tab_item {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Upvotes: 0