Javascript 修改默认选项卡显示结构

我正在研究angularJS。我已经用angularJS创建了标签，想修改标签的外观

我想显示圆角选项卡，如下图所示。

我很难用css实现这一点。 请建议如何获得如上图所示的选项卡圆角。 请在这里找到我的工作代码

CSS代码：

  <style>
    .nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
     background-color: #D0D0D0;
     }
   </style>

.nav tabs>li>a、.nav tabs>li>a:悬停、.nav tabs>li>a:焦点{
背景色：#D0；
}

HTML代码：

<div ng-controller="TabsParentController">
<tabset>
    <tab ng-repeat="workspace in workspaces"
         heading="{{workspace.name}}"
         active=workspace.active>
        <div ng-controller="TabsChildController">
            --some dynamic content here--
        </div>
     </tab>
</tabset>

--这里有一些动态内容--

请建议实现所显示选项卡圆角的最佳方法。我可以使用CSS或引导来实现这一点