Is there a trick or something simple I may be missing for forcing a nested div's square borders to be hidden within a parent's div rounded borders?
I.E.
div.parent {
overflow: hidden;
z-index: 100;
border-radius: 16px;
background: url('some-image.png') repeat-x;
position: relative;
behavior: url(/PIE.htc);
width: 100px;
height: 20px;
}
div.parent div {
z-index: 1;
position: absolute;
top: 0;
left: 0;
background: url('some-other-image.png') repeat.x;
width: 50px;
height: 20px;
}
This happens in I.E. 8 and below as I.E. 9 supports the border-radius and follow the overflow: hidden; on the rounded parts of the border.
In this scenario the parent div will have rounded borders just fine, owever the child div will overflow the square borders on the left. The child div will however hide any other overflow other than overflow going over the rounded borders of the parent.

Nope, this is a limitation that is impossible to work around unfortunately. IE doesn't allow us to clip content to non-rectangular shapes.