Solved

rounded corners on a div with thick border

Posted on 2007-11-26
4
1,700 Views
Last Modified: 2010-05-18
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

0
Comment
Question by:neburton
  • 3
4 Comments
 
LVL 13

Expert Comment

by:R7AF
ID: 20350747
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
 
LVL 1

Author Comment

by:neburton
ID: 20350806
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
 
LVL 13

Expert Comment

by:R7AF
ID: 20350848
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
 
LVL 13

Accepted Solution

by:
R7AF earned 500 total points
ID: 20350865
Another solution is this, but it requires javascript:
http://www.curvycorners.net/

There are more solutions like this!
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in script 11 56
bootstrap footer centering and expand problems 7 42
div to fit another div 8 22
specific navigation button disappears on mobile devices 1 15
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question