Round corners.

Forum Moderators: open

Message Too Old, No Replies

Round corners.

How?

one_mind

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

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

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

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

jalarie

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:

islandlizard

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

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">

</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">

</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

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.

moltar

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

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

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

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

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

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;"> </div>')
}
}
ln('23,18,14,12,10,8,7,6,5,4,4,3,3,2,2,1,1,1');

ronin

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

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.

Round corners.

How?

one_mind

Robin_reala

Mr_Brutal

jalarie

islandlizard

Tidal2

killroy

moltar

jalarie

jalarie

tomda

Tidal2

jalarie

ronin

tedster

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week