Html 为wordpress主题创建圆形css

如何在顶部栏导航中创建圆形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;
}

但仍然不走运

使用边界半径来创建想要形成圆形的元素

例如，对于注册表菜单：

边界半径：0.50em；最后一个图标应该是边界半径：0 0 8px 0

---

或者您可以使用边界半径生成器工具，例如，

您是否尝试过使用边界半径：5px？如果您正在谈论向下弯曲到导航菜单的红色形状，我很确定这是一个图像资源，而不是css。@frosty请检查更新的1above@David如何添加图像分辨率以适应导航边距？使用.main-navigation2a:first child{}和.main-navigation2a:last child{}我已经根据您的建议添加了，因为它将覆盖其他main-navigation2 css样式，如我的屏幕截图：