Solved

rounded corners on a div with thick border

Posted on 2007-11-26
4
1,698 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now