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:
use
overflow:hidden
. this solution doesn't apply current layout need other solution.apply
border-radius
bothli
,a
. this solution @ moment need @ least lessen css codes on project...
note: tab layout pixel perfect using method.
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>
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 }