html - Border-Radius is not Aligning Properly -
i trying create div rounded corners. inside div contains additional content fill height of div. i've noticed there visual corruption @ each corner of rounded div. looks me corner of outer div lightly larger inner div. according code, border-radius of both divs should identical.
example of issue: http://jsfiddle.net/mrzaf/4/
image of issue: http://imgur.com/ph6ihlc
<div class="a-a"> <div class="a-b">content in here</div> </div> <br><br> <div class="b-a"> <div class="b-b">content in here</div> </div> div.a-a { background:red; border-radius:10px; width:400px; } div.a-b { background:aqua; border-radius:10px; height:200px; } div.b-a { background:red; border-radius:10px; width:400px; overflow:hidden; } div.b-b { background:aqua; width:400px; height:200px; }
there couple of option this.
first option: increase border-radius of parent container
div.a-a { background:red; border-radius:13px; width:400px; }
second option: remove border-radius parent element , use child element , set background none.
div.a-a { background:none; width:400px; }
Comments
Post a Comment