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;  } 

js fiddle demo


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -