如何使用CSS / HTML在工具栏上制作圆角？

Question

我正在尝试弄清楚如何使用CSS，HTML或两者将工具栏转换为带圆角的工具栏。这是CSS：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #333333;
}
</style>

有人能告诉我要添加什么，以便工具栏的角落变圆？

Answer 1

这样的事情会发生（Demo Fiddle Here）？

#toolbar{
    border: 2px solid orange;
    padding: 10px 40px; 
    background: black;
    width: 300px;
    border-radius: 10px;
}

这个CSS实际上是来自w3schools的border-radius css规则页面：http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 2

CSS3 Border Radius：浏览器支持

由于Border radius Support遍布浏览器，除IE8外，您可以使用它，但请记住供应商前缀：

-webkit-border-radius: 2px;
   -moz-border-radius: 2px;
        border-radius: 2px;

实施例

以下是一个简单示例：Fiddle。