Créer un CSS de forme arrondie pour le thème WordPress

Comment puis-je créer la forme arrondie css dans la barre de navigation supérieure (en particulier pour le menu d’enregistrement, le menu de connexion et l’icône du panier) pour mon propre thème wordpress personnalisé comme le concept ci-dessous :

Son style.css juste pour la navigation dans la barre supérieure :

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

J’ai déjà tout essayé mais toujours pas de chance

Mise à jour #1 :

J’ai déjà ajouté le code « border-radius » à style.css comme ci-dessous :

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

mais toujours pas de chance

Solution n°1 trouvée

Utilisez border-radiusl’élément que vous voulez créer cette forme arrondie

par exemple. pour le menu de registre :

border-radius: 0 0 0 50em;et la dernière icône devrait êtreborder-radius: 0 0 8px 0;

ou vous pouvez utiliser des outils générateurs de rayon de bordure comme http://border-radius.com/, http://www.cssmatic.com/border-radius