Solved

rounded corners on a div with thick border

Posted on 2007-11-26
4
1,704 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

717 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