homepage Welcome to WebmasterWorld Guest from 54.204.77.26
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Round corners.
How?
one_mind




msg:591044
 9:01 am on Oct 11, 2005 (gmt 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 :)

 

Robin_reala




msg:591045
 9:42 am on Oct 11, 2005 (gmt 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.

Mr_Brutal




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

For a bit more info try Rounded Corners [webmasterworld.com]

jalarie




msg:591047
 7:05 pm on Oct 11, 2005 (gmt 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>

islandlizard




msg:591048
 3:27 am on Oct 13, 2005 (gmt 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]

Tidal2




msg:591049
 10:45 am on Oct 13, 2005 (gmt 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.

killroy




msg:591050
 12:37 pm on Oct 13, 2005 (gmt 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

moltar




msg:591051
 12:54 pm on Oct 13, 2005 (gmt 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.

jalarie




msg:591052
 1:13 pm on Oct 13, 2005 (gmt 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.

jalarie




msg:591053
 1:17 pm on Oct 13, 2005 (gmt 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');

tomda




msg:591054
 1:20 pm on Oct 13, 2005 (gmt 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

Tidal2




msg:591055
 5:16 pm on Oct 13, 2005 (gmt 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.

jalarie




msg:591056
 5:39 pm on Oct 13, 2005 (gmt 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');

ronin




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

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?

tedster




msg:591058
 8:08 pm on Oct 13, 2005 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved