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
Solved

rounded corners on a div with thick border

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

789 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