Brian 10

I have an element with a border-style of double. The element also has an overflow of hidden.

Its only child is an image.

I want the image to be visible below the double border, but the content stops when the border begins. Is there a current property/future property of CSS3 which can enable the look I desire?

Example code:

<div style="border: 6px double red; overflow: hidden; width: 200px; height: 200px;">
    <img src="example.png" style="width: 400px; height: 400px;" />
</div>

Thanks for any help which can be provided. :)

@Shaun

Yes, using extraneous markup is my current solution, far from ideal.

I would like overflow: hidden to apply to the outer edges of the border, not the outer edge of the width/height.

2 answers

Shaun Robinson 314
1
point

Could you show perhaps an image mock-up of what you are trying to achieve, I cannot picture it in my mind!

Answered almost 4 years ago by Shaun Robinson
Shaun Robinson 314
0
points

Overflow: hidden means exactly that: the overflow will be hidden. This will cause the image to stop at the border.

If you want a border that does not surround the image, but just goes over it, you should try using position:relative on a div like so:

HTML code:

 <div class="image-wrapper">
     <span class="image-border"> </span>
     <img src="image.jpg" width="400px" height="400px" alt="">
    </div>

CSS:

 .image-wrapper {position:relative; width:400px; height:400px;}
 .image-border {display:block; position:absolute; top:0px; left:0px; width:200px; height:200px; border: 6px double red;}
Answered almost 4 years ago by Shaun Robinson