asked on

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

R7AF

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

neburton

ASKER

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

R7AF

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

ASKER CERTIFIED SOLUTION

R7AF

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial