rounded corners on a div with thick border

I want to give a div with a 4px border rounded corners.  I've created 4 corner images tl.gif tr.gif bl.gif and br.gif but don't seem to be able to apply them to the div using background.

I'm using inline styles whilst experimenting. See the original div in attached code.

Any assistance would be appreciated and the code would need to work across recent browsers.
<div class="rndbox" style="width:1000px;height:200px;border:4px solid #c2c255;margin:0;padding:0;">
</div>

Open in new window

LVL 1
neburtonAsked:
Who is Participating?
 
R7AFConnect With a Mentor Commented:
Another solution is this, but it requires javascript:
http://www.curvycorners.net/

There are more solutions like this!
0
 
R7AFCommented:
If you want to apply rounded borders, it depends on whether you know the width or height of the div.

1) You know the height or the width, but not both
* say you know the height (most common)
* create an image for the left side with left top and bottom border in one image with the known height
* do the same for the right border
* use 2 divs, and apply to each div one image background

2) You know both height and div
* create one image and apply that to the current div

3) You don't know either height nor width
* do the same as (1), but now with 4 divs
0
 
neburtonAuthor Commented:
I want flexibility to create boxes of different sizes, so would prefer option 3 using 4 images for the corners.  I've create 2 divs for top left and top right inside the containing bordered div, but it doesn't seem to do anything in IE7.


<div style="width:1000px;height:200px;border:4px solid #c2c255;">
<div style="background: url(images/tr.gif) no-repeat right top;"></div>
<div style="background: url(images/tl.gif) no-repeat left top;"></div>
</div>

Open in new window

0
 
R7AFCommented:
You have to nest all those divs! Something like this:
<div style="width:1000px;height:200px;border:4px solid #c2c255; background: url(images/br.gif) no-repeat right bottom;">
	<div style="background: url(images/tr.gif) no-repeat right top;">
		<div style="background: url(images/tl.gif) no-repeat left top;">
			<div style="background: url(images/bl.gif) no-repeat left bottom;"></div>
		</div>
	</div>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.