Как добавить углы в горизонтальную панель вкладок в jQuery Mobile

Question

Как добавить круглые углы к горизонтальным вкладкам в jQuery Mobile 1.4? Несмотря на то, что класс ui-corner-all уже присутствует, а элемент UL имеет радиус границы, углы по-прежнему не имеют радиуса. В вертикальном списке радиус работает, но не здесь.

Вы можете проверить его непосредственно на official page.

Answer 1

CSS

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

DEMO

Если вы просто хотите, чтобы первая и последняя быть округлены

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

Answer 2

добавив это должно сделать трюк

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

Answer 3

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; 
}