css: формирование фигурных границ

$(function() { 
  $("li").click(function(e) { 
    e.preventDefault(); 
    $("li").removeClass("active"); 
    $(this).addClass("active"); 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  overflow-x: hidden; 
  background: #222; 
} 
 
#content { 
  text-align: center; 
  padding: 50px; 
  background: white; 
  min-height: 400px; 
} 
 
.tabs { 
  display: table; 
  list-style: none; 
  margin: 60px auto 0; 
} 
 
.tabs li { 
  /* Makes a horizontal row */ 
  float: left; 
  /* So the psueudo elements can be 
			   abs. positioned inside */ 
  position: relative; 
} 
 
.tabs a { 
  /* Make them block level 
		     and only as wide as they need */ 
  float: left; 
  padding: 10px 40px; 
  text-decoration: none; 
  /* Default colors */ 
  color: black; 
  background: #ddc385; 
  /* Only round the top corners */ 
  -webkit-border-top-left-radius: 15px; 
  -webkit-border-top-right-radius: 15px; 
  -moz-border-radius-topleft: 15px; 
  -moz-border-radius-topright: 15px; 
  border-top-left-radius: 15px; 
  border-top-right-radius: 15px; 
} 
 
.tabs .active { 
  /* Highest, active tab is on top */ 
  z-index: 3; 
} 
 
.tabs .active a { 
  /* Colors when tab is active */ 
  background: white; 
  color: black; 
} 
 
.tabs li:before, 
.tabs li:after, 
.tabs li a:before, 
.tabs li a:after { 
  /* All pseudo elements are 
		     abs. positioned and on bottom */ 
  position: absolute; 
  bottom: 0; 
} 
 
 
/* Only the first, last, and active 
		   tabs need pseudo elements at all */ 
 
.tabs li:last-child:after, 
.tabs li:last-child a:after, 
.tabs li:first-child:before, 
.tabs li:first-child a:before, 
.tabs .active:after, 
.tabs .active:before, 
.tabs .active a:after, 
.tabs .active a:before { 
  content: ""; 
} 
 
.tabs .active:before, 
.tabs .active:after { 
  background: white; 
  /* Squares below circles */ 
  z-index: 1; 
} 
 
 
/* Squares */ 
 
.tabs li:before, 
.tabs li:after { 
  background: #ddc385; 
  width: 10px; 
  height: 10px; 
} 
 
.tabs li:before { 
  left: -10px; 
} 
 
.tabs li:after { 
  right: -10px; 
} 
 
 
/* Circles */ 
 
.tabs li a:after, 
.tabs li a:before { 
  width: 20px; 
  height: 20px; 
  /* Circles are circular */ 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px; 
  background: #222; 
  /* Circles over squares */ 
  z-index: 2; 
} 
 
.tabs .active a:after, 
.tabs .active a:before { 
  background: #ddc385; 
} 
 
 
/* First and last tabs have different 
		   outside color needs */ 
 
.tabs li:first-child.active a:before, 
.tabs li:last-child.active a:after { 
  background: #222; 
} 
 
.tabs li a:before { 
  left: -20px; 
} 
 
.tabs li a:after { 
  right: -20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="tabs group"> 
  <li class=""><a href="#one">One</a></li> 
  <li class="active"><a href="#two">Two</a></li> 
  <li><a href="#three">Three</a></li> 
  <li><a href="#three">Four</a></li> 
</ul> 
<div id="content"> 
  <h1>Round Out Tabs</h1> 
</div>