Welcome to WebmasterWorld Guest from 54.145.198.123

Forum Moderators: incrediBILL

Message Too Old, No Replies

Round corners.

How?

     
9:01 am on Oct 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 11, 2005
posts:174
votes: 0


Hi,

I was hoping someone could tell me how websites get rounded corners on boxes. eg Check out the front page of elance. Does anyone know how they done that border of their main logo up top?

Any help would be greatly appreciated.

Thanks :)

9:42 am on Oct 11, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Well, ideally:

div { border-radius: 10px }

or equivalent. In the face of extremely patchy support for that though it's a case of positioning little graphics in each corner using CSS.

9:48 am on Oct 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:July 14, 2003
posts:130
votes: 0


For a bit more info try Rounded Corners [webmasterworld.com]
7:05 pm on Oct 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


I use a null.gif in multiple table cells of varying widths to produce any size and color corners I want. It uses a LOT of code to do it, but it works in every GUI browser that I can find. Imagine that you have the gif, and then:

<style type="text/css">
<!--
.RC_color {
background-color: #ffdd00
}
-->
</style>

<table border="0" cellspacing="0" cellpadding="0" style="padding-left:20px;">
<tr>
<td align="right" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1px" height="1px" alt="" /></td>
<td align="left" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
</td>
</tr>
<tr>
<td class="RC_color"><img src="zd0_null.gif" width="1px" height="1px" alt="" /></td>
<td class="RC_color" align="left">
=============================<br />
Sample content; replace this.<br />
=============================
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1px" height="1px" alt="" /></td>
</tr>
<tr>
<td align="right" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3px" height="1px" alt="" /></td></tr></table>
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1px" height="1px" alt="" /></td>
<td align="left" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5px" height="1px" alt="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3px" height="1px" alt="" /></td></tr></table>
</td>
</tr>
</table>

3:27 am on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 13, 2005
posts:41
votes: 0


The border-radius attribute is a CSS3 option, so not well supported.

Elance is simply using a large graphic file for the background of their entire header div, so effectively the whole thing is an image.

This is the most common way

if you are putting corners on a fixed width element, there are neat ways you can do this with a small transparent gif, the width of your element, containing just the rounded corners in your page background colour and CSS background-image combined with background-color on your fixed width div. The div background colour shows through the transparent areas of the gif, which gives the illusion of rounded corners.

I can give an example if needed. (That might not be too clear!)

[edited by: engine at 11:50 am (utc) on Oct. 14, 2005]
[edit reason] de-linked [/edit]

10:45 am on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 13, 2004
posts:121
votes: 0


Theres a Javascript alternative too:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Top Left Corner</title>
<script language="JavaScript" type="text/javascript">
<!--
function ln(len){
document.write('<div style="width:'+len+'px; font-size:1px; line-height:1px; height:1px; background-color:#cccccc; margin:0px; padding:0px;">&nbsp;</div>')
}
//-->
</script>
</head>
<body style="padding:0px; margin:0px">
<h1 style="background-color:cccccc; margin:0px;padding:4px;">Grey Bar</h1>
<div style="float:left;">
<script language="JavaScript" type="text/javascript">
<!--
ln(23);ln(18);ln(14);ln(12);ln(10);ln(8);ln(7);ln(6);ln(5);ln(4);ln(4);ln(3);ln(3);ln(2);ln(2);ln(1);ln(1);ln(1);
//-->
</script>
</div>
Page content.
</body>
</html>

This is for the top left corner and works in the current versions of IE, Firefox and Opera.

12:37 pm on Oct 13, 2005 (gmt 0)

Senior Member from MT 

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 1, 2003
posts:1843
votes: 0


The most ellegant solution I've found so far goes something like this (from the top of my head):

<div class="rounded"><div><div><div><div><div><div><div>
Content here
</div></div></div></div></div></div></div></div>

Then the css goes something like this:

div#rounded {
CSS to place the upper left corner image using background-image
}
div#rounded div {
CSS to place the upper edge image using background-image
}
div#rounded div div {
CSS to place the upper right corner image using background-image
}
div#rounded div div div {
CSS to place the right edge image using background-image
}
div#rounded div div div div {
CSS to place the lower right corner image using background-image
}
div#rounded div div div div div {
CSS to place the lower edge image using background-image
}
div#rounded div div div div div div {
CSS to place the lower left corner image using background-image
}
div#rounded div div div div div div div {
CSS to place the left edge image using background-image
}

The beauty of this method is that the box can stretch to any size according to the content. And the 8 (or 4 if u only require the corners) divs are the only "messy" markuyp u need.

This way you can even have round-beveled or shadowed edges. Simpler edges can be achieved with single pixel high or wide gifs.

SN

12:54 pm on Oct 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 18, 2003
posts:1925
votes: 0


jalarie: that's the most bizarre solution i've ever seen!

In reality having rounded corners and having nice HTML is really difficult. I prefer the semantic markup + JS. It basically comes down to this:

<div class="rounded"></div>

Then you use JS to add several hook elements inside the <div> and then style them accordingly.

There are many articles that show different approaches to this.

1:13 pm on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


moltar: jalarie: that's the most bizarre solution i've ever seen!

Thank you! I try really hard to be as bizarre as possible, particularly with Halloween just around the corner. I have a friend who's a witch and calls it Samhain and Ground Hog day is Beltain, but I'm getting off the subject.

Actually, I stole the idea from someone else. And then I created a web page to do the work for me of generating all of that code based on width, height, color, and shape of the corners. My generator does the standard rounded-outward corners, rounded inward, ogee in either direction, triple curve out-in-out or in-out-in, flat diagonal, diagonal with bump out or in, and stairsteps. And it works with height and width the same or different. Unfortunately, I can't post the URL to the site I stole from, nor the one to my own site, so start with the above and re-invent the wheel.

1:17 pm on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


Tidal2: Your solution looks like fun. How about having the function accept multiple values so that you could cut the code to call it to something like this:

ln('23,18,14,12,10,8,7,6,5,4,4,3,3,2,2,1,1,1');

1:20 pm on Oct 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 7, 2004
posts:929
votes: 0


The one I used is slighty similar to Jalarie example but it use <b> instead <div>.
I am sure I am not the only one using it because it is short, simple and nice.
Google for "nifty corners rounded b" to find the source
5:16 pm on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 13, 2004
posts:121
votes: 0


jalarie: Yes it was fun as I enjoying coding. Originally I tried to do it with a single parameter for the number of steps in the curve, much more flexible.

But its been a long time since I looked at sines and cosines when I got into trying tangents and arc-tangents, I gave up and I did the quick and dirty method.

5:39 pm on Oct 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


Tidal2: I was bored, so I:

function ln(what) {
var whats=String(what).split(/\,/);
for (var ix=0; ix<whats.length; ix++) {
document.write('<div style="width:'+whats[ix]+'px; font-size:1px; line-height:1px; height:1px; background-color:#cccccc; margin:0px; padding:0px;">&nbsp;</div>')
}
}
ln('23,18,14,12,10,8,7,6,5,4,4,3,3,2,2,1,1,1');

6:41 pm on Oct 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 9, 2003
posts:2099
votes: 8


I'm quite keen to start using things like columns and border-radius. Obviously IE won't get there until 2015, because for some reason development on IE moves forward at the speed of a sloth (why?!), but surely Moz and Opera are going to start coming out with CSS3 compliant builds soon?
8:08 pm on Oct 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


development on IE moves forward at the speed of a sloth (why?!)

Legacy support, especially for IE proprietary functions that are widely used in back office applications and Intranets. Microsoft was never aiming at just public websites. The corporate environment is a big deal for them, as well as equipping all the MS Office appplications into web functionality that isa compatible with IE.

So they're not just building a browser -- every move they make has widespread repurcsussions.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members