外部容器上的 CSS 边框半径

Question

我对一些 CSS 边框半径有一点问题。

我正在使用带有 .navbar-nav 等的 Bootstrap 3，我需要容器具有像导航按钮一样的边框半径，但我不知道从哪里开始。如果有人能指出我正确的方向，将不胜感激！提前致谢

如您所见，外部部分是方形的，但我需要它像导航按钮一样圆润。

我想得到什么：

代码如下：

 <div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Who we are</a></li>
          <li><a href="#">What we do</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Design</a></li>
              <li><a href="#">Construction</a></li>
              <li><a href="#">Planned maintenance</a></li>
            </ul>
          </li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Our responsibilities</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

还有 CSS

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-default {
  background-color: #ff6b00;
  border-color: transparent;
  border-radius: 0;
  margin-bottom:0;
  border:0;
}
.navbar-default .navbar-nav {
  background:#092c74;
}
.navbar-default .navbar-nav > li > a {
  color: #FFF;
  background:#ff6b00;
  padding-left:20.9px;
  padding-right:20.8px;
  margin:0 1.5px;
  text-transform: uppercase;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: all .2s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -o-transition: all .1s linear;
}
.navbar-default .navbar-nav > li:first-child a {
  margin-left:3px;
}
.navbar-default .navbar-nav > li:last-child a {
  margin-right:3px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #FFF;
  background-color: #c85400;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #092c74;
  background-color: #FFF;
}

Answer 1

为我设法弄明白的帮助而欢呼。使用 :before :after

.navbar-default .navbar-nav:before {
  width:5px;
  height:5px;
  position:absolute;
  top:0;
  left:10px;
  background:#ff6b00;
  background-image:url('../images/top-right-radius.png');
  background-position: top right;
  background-repeat: no-repeat;
}
.navbar-default .navbar-nav:after {
  width:5px;
  height:5px;
  position:absolute;
  top:0;
  right:10px;
  background:#ff6b00;
  background-image:url('../images/top-left-radius.png');
  background-position: top right;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) { .navbar-default .navbar-nav:before { display:none; } .navbar-default .navbar-nav:after { display:none; } }

看起来很丑，但仍然有效，很想听听是否有更好的方法来做到这一点。再次感谢大家的帮助，非常感谢！