Rounded corners

What's your favorite way to create rounded corners for the main body element, just like crazyegg.com's.

I'm having a hard time slicing it as it creates a fixed width, as for using tons of <div>'s with specific backgrounds makes the main HTML code a bit too crowded.

Javascript I've heard it's slow but would implement it if I knew any techniques.

What's your favorite?

 

Use 4 corners is my approach.

 

You can try this:
http://www.smileycat.com/miaow/archives/000044.php

 

Why use 'tons of <div>'s'? Create a class for each corner, then call it, and you're done.

 

Why not make rounded corners automatically with CSS?

http://stylizedweb.com/2008/08/19/css3-rounded-corners/

(Only works in FF3 and Safari)

 

Because...

 

The best way of doing this is to use image,
The CSS way to very limited.

 

so, fixed layout?

 

Use CSS, and div tags: This is from my site.

<style>

#left-top {
float: left;
width: 5px;
height:28px;
font-size: 2px;
background-image: url(../images/orangetop.jpg);
background-repeat:no-repeat;
background-position: 0 0;
}

#right-top {
float: right;
width: 5px;
height:28px;
font-size: 2px;
background-image: url(../images/orangetop.jpg);
background-repeat:no-repeat;
background-position: 0 -28px;
}

#center-top{
padding: 5px 5px 10px 5px;
background-image: url(../images/orangetop.jpg) repeat-x;
background-repeat:repeat-x;
background-position: 0 -56px;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
text-align:left;
}

#left-bottom {
float: left;
width: 5px;
height:5px;
font-size: 2px;
background-image: url(../images/container.png);
background-repeat:no-repeat;
background-position:0px 0px;
}

#mid-bottom {
font-size: 2px;
height:5px;
background-image: url(../images/container.png);
background-repeat:repeat-x;
background-position:0px -12px;
}

#right-bottom
{
float: right;
width: 5px;
height:5px;
font-size: 2px;
background-image: url(../images/container.png);
background-repeat:no-repeat;
background-position:0px -6px;
}


</style



<div id="left-top"></div>
<div id="right-top"></div>
<div id="center-top">
<p>Your content here </p>
</div>
<div id="mid-bottom">
<div id="leftcorner-bottom"></div>
<div id="rightcorner-bottom"></div>
</div>

 

You can 'JQuery' for rounding the corners of HTML elements. I don't know much about it's performance. We can do lot of things using small number of JavaScript codes.

 

why can't you just use a bottom and top image with rounded corners instead of four corners?

 

I agree, a lot of the time if you try using CSS only the result is lots of markup - with images it allows the best results and also more control over design in my experience.

 

This enables the box to expand and contract according to the content.

You could use htmlDog method:
p {
color: black;
background: red url(images/tl.gif) top left no-repeat;
}

p span {
display: block; /* sets all spans inside p to block, so only need this once */
background: url(images/tr.gif) top right no-repeat;
}

p span span {
background: url(images/br.gif) bottom right no-repeat;
}

p span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(images/bl.gif) bottom left no-repeat;
}

p span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}

then html:
<p><span><span><span>
test text goes here.
</span></span></span> </p>

 

Probably the most important part to remember, or you'll see a white space between your divs, very annoying and a pain to figure out sometimes.

 

there are many ways to design a website layout for your website.......to do rounded corners, i prefer to use images anstead of css....and you can also declare one class and call it wherever it is necessary.....

 

Width flexibility

 

yup, you are very off using images,

an easy way to approach the issue is by coding a box

split the top in 3 sections, LEFT corner, CENTER img, RIGHT corner,

then center for content , center img

and repeat for the bottom, LEFT corner, CENTER img, RIGHT corner,

this should help when auto stretching.

regards,

 

just use above ans