div中重叠圆角的内容。

Question

I am trying to get rounded corners on a table element. Ideally, I would like the rounded corners to show on IE 7-10, Chrome, and Firefox. To do that, I am using JQuery Corner . The problem I am facing is that when I apply the default rounded corner effect to the div that surrounds my table, the table overlaps the borders/corners.

Here a screenshot:

Why is table going outside of my div?

Answer 1

Tables don't accept border-radius as a property. 

http://jsfiddle.net/Kyle_/zBE6H/

What you can do is wrap it in a div and give that border radius, while removing the border of the table (or giving the border the same color as the div's background.)

http://jsfiddle.net/Kyle_/zBE6H/1/