CSS overflow rule includes object border?

Question

Say I have a "div" element with a border assigned to it. If the overflow rule for it is set to 'hidden', content that is ON the border of the "div" disappears.

Is there any way to overcome this? Because in my scenario, having content that is on the border not disappear is very important. I need the boundaries of my element to include the border too.

Answer 1

I believe it will take three div's to achieve this (maybe somebody can come up with a two div solution). Here is an example fiddle. Three nested div elements (the outer here has the .CropIt class) with:

CSS

.CropIt {
    overflow: hidden;
    width: 60px;
}

.CropIt > div {
    border: 20px solid red;
    width: 20px;
}

.CropIt > div > div {
    margin: -20px;
}

The outer sets the overflow to hide past the border hidden. The middle sets the width and border (which outer must match that total width or use float to shrink wrap). The innermost set's the negative margin to push the content over the border of middle, and create the overlap of the border to the middle div.