Proper Rounded Corners

I was guilty. I admit it, I was doing rounded corners wrong. In my current project I am using CSS3 to round the corners on containers. These containers have internal elements that get separated by a thin border. I was rounding the corners on those internal elements with the same radius as the wrapper container. I never noticed it before but this is the wrong way to do it.

Check out this post on what properly round corners are.

So what was the difference in my project? I took screenshots of before and after and animated a GIF with them so that you can see the difference. Yes it’s very subtle, but the perfectionist in me is much happier with the proper method.

I was rounding both outer and inner elements with a 5px radius. After I learned my lesson I’m rounding the outer elements with a 5px radius and the inner element with a 4px radius. What do you think of the difference?