Is there any way an image contained within a div can appear on top of the border of the containing div? Im testing out rounded corners with a box with a border on it. It all works except for the fact the CSS border still shows above the corner images. I've tried z-indexing but it doesn't seem to work. Thanks!

It sounds as if your image in the div with rounded corners has transparent areas outside the curved corners; in which case make them solid color to match the outside color and it should then cover the container border. You will probably also have to use negative left and right margins to drag the image over the container borders because the inner div with the image would normally fit inside the container borders.

nope - not the case. The site is here : www.g4h.cttestarea.co.uk

I have discovered a strange effect in Firefox and IE7 - if you delete overflow: hidden from the container the image shows properly over the border; although position: relative and float works, it seems a little better with position: absolute;-

 

#roundedbox
{                                                       
	border: 3px solid #cc0000;
	background: #cccccc;
	/*overflow: hidden;*/
	width: 760px;
	margin: auto;
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}

#roundedbox #top, #roundedbox #bottom
{                                                       
	font-size: 0;/*1px; */              width: 760px;
	height: 16px;
	line-height: 0;/*1px;*/
	margin: 0;/* -3px;*/
}

#roundedbox #topleft
{  position: absolute; left: -3px; top: -3px;                              
	z-index: 2; 
	/*position: relative; left: -3px; top: -3px;*/
	background: url('images/content_corner.gif') 
no-repeat top left;
	/*float: left;*/
	height: 16px;
	width: 16px;
}

#roundedbox #topright
{        position: absolute; right: -3px; top: -3px;          z-index: 2; 
	/*position: relative; left: -3px; top: -3px;*/
	background: url('images/content_corner.gif') 
no-repeat top right;
	/*float: right; */               
	height: 16px;
	width: 16px;
}

 

I've only tested the top corners and unfortunately the image curve doesn't quite match the border on -3px or -2px, it's in between! but the red border definitely disappears outside the curved corner.

So basically it's not possible if I require overflow: hidden? Surely this must be a common thing on websites? Is there a better way for a border on a rounded box that fits with the contents?

So basically it's not possible if I require overflow: hidden? Surely this must be a common thing on websites? Is there a better way for a border on a rounded box that fits with the contents?

 

You could use Javascript to reduce the amount of html mess..

 

A quick google turns up:

 

http://curvycorners.net

 

The webkit html engine has a CSS property which can do it.. however, it doesn't validate with w3

 

.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
}

I spent a long time testing with position: relative or position: absolute and also with the image in the divs with position: relative or position: absolute instead of background-images but all gave the same result until I deleted overflow: hidden, then all the options worked.

 

So it looks as if you will have to find a way to avoid using overflow: hidden, or re-stucture the page completely.

I spent a long time testing with position: relative or position: absolute and also with the image in the divs with position: relative or position: absolute instead of background-images but all gave the same result until I deleted overflow: hidden, then all the options worked.

 

So it looks as if you will have to find a way to avoid using overflow: hidden, or re-stucture the page completely.

 

@ KieranA Javascript may be worth a try but the curved corners have two colors (one being a thin border) so Javascript may not work.

ah, okay - maybe i should have taken a look at the site beforehand.. either way i'm pretty sure libraries take this into account.

I've just checked here http://www.curvycorners.net/includes/examples/demo4.html so javascript could work, but at the moment the border is on the parent div, so that one would need the curved corners, not the child divs.

 

I was more interested to find out why the image method wasn't working when I've used that method myself without a problem.

That curvy corners works like a charm, but like you say - it doesn't validate. What an arse.

edit: it works like a charm but not in any version of IE. Any ideas why? Website: www.gunstribute.co.uk

edit: it works like a charm but not in any version of IE. Any ideas why? Website: www.gunstribute.co.uk

 

The curvy corners uses a Javascript Library - So it should validate regardless as the w3 validator only takes into account the html...

 

If the user has javascript disabled (very unlikely nowadays) the corners won't be rounded but your site should still look fairly good and will work fine.

 

The built-in mozilla/webkit css options are a pain because they don't validate.. but what you could do is append the style using a tiny bit of javascript (which will apply those css styles to it.)

 

So if you used jquery:

 

$("#container").css({
'-moz-border-radius': '5px',
'-webkit-border-radius': '5px',
'border': '1px solid #000'});

 

 

Also, the CurvyCorners javascript isn't linked properly.. so it wont work in IE nor Firefox.. but the reason you can see the rounded corners in firefox is because it's falling back to what i mentioned above (webkit html) and IE doesn't use the same.

 

Change this

 

<script type="text/JavaScript" src="../curvycorners.src.js"></script>

 

to this:

 

<script type="text/JavaScript" src="curvycorners.js"></script>

oops yeah didn't see that thanks

oops yeah didn't see that thanks

 

No problem - Hope it works now:)

So if you used jquery:

 

$("#container").css({
'-moz-border-radius': '5px',
'-webkit-border-radius': '5px',
'border': '1px solid #000'});

 

 

I can't seem to get this to work. Can you explain where abouts to put this code? Im still getting to grips with jQuery...