CSS overflow rule include object border?

Question

Say I have a div element with a border assigned to it. If the overflow rule is set to “hidden,” the content located on the “div” border disappears.

Is there any way to overcome this? Because in my scenario, the presence of content on the border does not disappear is very important. I need the borders of my element to also include the border.

Answer 1

I believe that to achieve this, you will need three div's (maybe someone can come up with two div solutions). Here is an example script . Three nested div elements (the outer one has the .CropIt class):

CSS

 .CropIt { overflow: hidden; width: 60px; } .CropIt > div { border: 20px solid red; width: 20px; } .CropIt > div > div { margin: -20px; } 

The outer sets an overflow to hide the hidden border. The middle sets the width and the border (the outer should match this total width or use a float to compress the wrapper). The innermost sets a negative margin for moving content along the middle border and creates a border overlap to the middle of the div .

Answer 2

I think adding padding around your div will save your border. Check out this jsfiddle I created for you.