html - Inner div with background doesn't affected by outer div with border-radius -

i applied border border-radius li. background applied a. issue a corners still showing up.

is there solutions can think of aside following?

two possible solutions:

1. use overflow:hidden. this solution doesn't apply current layout need other solution.

2. apply border-radius both li , a. this solution @ moment need @ least lessen css codes on project...

note: tab layout pixel perfect using method.

fiddle here.

body {    background:#eee  }  ul {    margin: 0;    padding: 0;  }  ul li {    display: inline-block;    list-style: none;    position: relative;    border:1px solid #aaa;    border-bottom:0;    border-radius:5px 5px 0 0;    vertical-align:bottom;  }  ul li {    padding: 10px 15px;    display: block;    line-height: 25px;    margin-bottom:-1px;  }  ul li.active {    background:#fff;  }    .content {    border:1px solid #aaa;background:#fff;height:200px  }

<ul>      <li class="active"><a href="#">tab 1</a></li>      <li><a href="#">tab2</a></li>      <li><a href="#">tab3</a></li>      <li><a href="#">tab4</a></li>    </ul>    <div class="content"></div>

fiddle

body {   background:#eee } ul {   margin: 0;   padding: 0; } ul li {   display: inline-block;   list-style: none;   position: relative;   vertical-align:bottom; } ul li {   padding: 10px 15px;   display: block;   line-height: 25px;   margin-bottom:-1px;   border:1px solid #aaa;   border-bottom:0;   border-radius:5px 5px 0 0; } ul li.active {   background:#fff; }  .content {   border:1px solid #aaa;background:#fff;height:200px }