border-radius + background-color == cropped border

html border background-color css
Kirk Woll picture Kirk Woll · Jun 10, 2011 · Viewed 87.7k times · Source

Consider a div with the border-radius, border, and background-color CSS attributes applied:

enter image description here

Now consider a similar layout but with the background-color specified in an inner-div:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

enter image description here

I'm dismayed by the fact that the background-color of the inner <div> is obscuring the border of the outer <div>.

This is a simplified sample of the problem. In reality, I'm using a <table> as the inner element with alternating row colors. And I'm using a <div> as the outer element since border-radius does not seem to work on the <table> element. Here's a jsfiddle of a sample of this problem.

Does anyone have a suggestion for a solution?

Answer

Dotan picture Dotan · Sep 12, 2012

Try overflow:hidden in the outer div:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

Related questions

Set a background color on the HTML <area> element?

Is there any way to set a background color for the HTML <area> element? I'm creating an image map where certain sections of the map will pop up a tooltip when you mouse over them, and I thought …

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More