Создание округлой CSS формы для WordPress темы

Question

Как я могу сделать закругленный CSS формы в верхней панели навигации (особенно для меню регистра, меню входа, и корзины значка) для собственной пользовательского WordPress темы, как концепция ниже:

Его style.css только для верхней панели навигации:

.main-navigation2 { 
    float: none; 
    height: 50px; 
    background: #fff; 

} 

.main-navigation2 ul { 
    display: none; 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 

.main-navigation2 li { 
    float: right; 
    position: relative; 
} 

.main-navigation2 a { 
    padding: 0 20px 0 20px; 
    display: block; 
    text-decoration: none; 
    line-height: 50px; 
    color: #000; 
    font-family: sans-serif; 
    background: #ff3400 url(img/arrow.png) no-repeat scroll right/20% 20%; 
} 

.main-navigation2 ul ul { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    float: left; 
    position: absolute; 
    top: 1.5em; 
    left: -999em; 
    z-index: 99999; 
} 

.main-navigation2 ul ul ul { 
    left: -999em; 
    top: 0; 
} 

.main-navigation2 ul ul a { 
    width: 200px; 
    line-height: 40px; 
    padding: 0 20px; 
    display: block; 

} 

.main-navigation2 ul ul li { 

} 

.main-navigation2 li:hover > a, 
.main-navigation2 li.focus > a { 
background: #e6370a; 

} 

.main-navigation2 ul ul :hover > a, 
.main-navigation2 ul ul .focus > a { 
} 

.main-navigation2 ul ul a:hover, 
.main-navigation2 ul ul a.focus { 
} 

.main-navigation2 ul li:hover > ul, 
.main-navigation2 ul li.focus > ul { 
    left: auto; 
} 

.main-navigation2 ul ul li:hover > ul, 
.main-navigation2 ul ul li.focus > ul { 
    left: 100%; 
} 

.main-navigation2 .current_page_item > a, 
.main-navigation2 .current-menu-item > a, 
.main-navigation2 .current_page_ancestor > a { 
} 


/* Small menu. */ 
.menu-toggle, 
.main-navigation2.toggled ul, 
.main-navigation.toggled ul { 
    display: block; 
} 

@media screen and (min-width: 37.5em) { 
    .menu-toggle { 
     display: none; 
    } 
    .main-navigation ul { 
     display: block; 
    } 
    .main-navigation2 ul { 
     display: block; 
    } 
} 

Я уже попробовал все, но до сих пор не повезло

Обновлено # 1:

Я уже добавил «пограничный радиус» код style.css, как показано ниже:

.main-navigation2 a { 
padding: 0 20px 0 20px; 
display: block; 
text-decoration: none; 
line-height: 50px; 
color: #000; 
font-family: sans-serif; 
background: #ff3400 url(img/arrow.png) no-repeat scroll right/20% 20%; 
border-radius: 0px 0px 0px 124px; 
-moz-border-radius: 0px 0px 0px 124px; 
-webkit-border-radius: 0px 0px 0px 124px; 
border: 6px solid #ffffff; 
} 

, но до сих пор не удача

Answer 1

Использование border-radius для элемента, который вы хотите сделать это закругленную форму

например. в меню регистра:

border-radius: 0 0 0 50em; и последний значок должен быть border-radius: 0 0 8px 0;

или вы можете использовать инструменты радиус генератора приграничные как http://border-radius.com/, http://www.cssmatic.com/border-radius