Rounded borders without any fill

Forum Moderators: open

Message Too Old, No Replies

Rounded borders without any fill

music_man

2:15 am on Apr 5, 2006 (gmt 0)

I am looking to have a rounded border for a div without any fill - that is, it is just a border. I have found spiffycorners and that is great but the div is filled. Can anyone recommend a tutorial for this?

I can use fireworks MX 2004 to create iamges (I want photoshop).

DrDoc

4:03 am on Apr 5, 2006 (gmt 0)

I have sometimes used the "bullet proof rounded corners" solution, or modifications thereof.

music_man

5:30 am on Apr 5, 2006 (gmt 0)

Thanks. That looks pretty good. Just wondering about quite large borders?

music_man

9:07 am on Apr 7, 2006 (gmt 0)

Any ideas?

DrDoc

9:02 pm on Apr 7, 2006 (gmt 0)

What are you wondering about them?

music_man

9:18 pm on Apr 7, 2006 (gmt 0)

How do I go about making really large rounded borders? I am pretty sure I could do it with a table, but not with a div, which is how I want to do it.

DrDoc

4:12 am on Apr 8, 2006 (gmt 0)

Simply specify a wider border width, and create your images accordingly.

border: 20px solid #000;

music_man

10:01 am on Apr 9, 2006 (gmt 0)

Thanks. I am wondering about the structure, how to do it using divs.

DrDoc

10:09 pm on Apr 9, 2006 (gmt 0)

The "bullet proof rounded corners" solution works with larger borders as well (and it is already using divs). You just have to adjust margins and paddings to match the increased border width.

music_man

5:44 am on Apr 17, 2006 (gmt 0)

I am trying to use this but I can't seem to make the border work.

I am looking to have the rounded border as the outline of the page. The image is 72px big and the border in Fireworks is 5px soft.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

.roundedCornerSpacer {
margin: 0px; padding: 0px; border: 0px;
clear: both;
font-size: 1px; line-height: 1px;
}
/* In the CSS below, the numbers used are the following:
1px: the width of the border
3px: a fudge factor needed for IE5/win (see below)
4px: the width of the border (1px) plus the 3px IE5/win fudge factor
14px: the width or height of the border image
*/
.borderTL, .borderTR, .borderBL, .borderBR {
width: 72px; height: 72px;
padding: 0px; border: 0px;
z-index: 99;
}
.borderTL, .borderBL { float: left; clear: both; }
.borderTR, .borderBR { float: right; clear: right; }
.borderTL { margin: -1px 0px 0px -1px; }
.borderTR { margin: -1px -1px 0px 0px; }
.borderBL { margin: -14px 0px 0px 0px; }
.borderBR { margin: -14px 0px 0px 0px; }
/* IE5-5.5/win needs the border scooted to the left or right by an
additional 3px! Why? */
.borderTL {
margin-left: -4px;
ma\rgin-left: -1px;
}
html>body .borderTL {
margin-left: -1px;
}
.borderTR {
margin-right: -4px;
ma\rgin-right: -1px;
}
html>body .borderTR {
margin-right: -1px;
}
.borderBL {
margin-left: -3px;
ma\rgin-left: 0px;
}
html>body .borderBL {
margin-left: 0px;
}
.borderBR {
margin-right: -3px;
ma\rgin-right: 0px;
}
html>body .borderBR {
margin-right: 0px;
}
/* To get around a known bug in IE5/win, apply the
border (no margin, padding or positioning) to the
content class and apply whatever positioning you
want to the contentWrapper class. */
.content {
margin: 0px;
padding: 0px;
border: 1px solid #00000;
}
.contentWrapper {
/* position this div however you want, but
keep its padding and border at zero */
padding: 0px;
border: 0px;
}

</style>

</head>

<body>
<div class="contentWrapper">
<div class="content">
<img class="borderTL" src="newimages/topleft.gif" alt=" " />
<img class="borderTR" src="newimages/topright.gif" alt=" " />
<h1>Here be content!</h1>
<p>asassasdsda</p>
<div class="roundedCornerSpacer"> </div>
</div>
<div class="bottomCorners">
<img class="borderBL" src="newimages/bottomleft.gif" alt=" " />
<img class="borderBR" src="newimages/bottomright.gif" alt=" " />
</div>
</div>

</body>
</html>