[gameover]

Use spiffy corners. It's pure css and fastest stable solution:

www . spiffycorners . com

[suedenem]

Spiffy Corners introduces a lot of extraneous (X)HTML into documents. It can be difficult to generate on the fly (if working with dynamic content) and can cause code to become unwieldly.

There are a few JS solutions which do the job well, Nifty Cube (IMO) being the pick of the bunch:

Nifty Corners Cube - freedom to round

Of course, the rounded corners aren't available to those who have chosen to disable JS, but it degrades well. It works on the same principle as Spiffy, but manipulating the DOM dynamically rather than explicitly adding the extra (X)HTML.

You just need to weigh up the pros and cons of each approach on a project-by-project basis.

[audax]

It is possible to do anti-aliased rounded corners with JQuery as well. A relatively simple solution, but just like all JS, it won't work unless JS is enabled. Nevertheless, it works nicely and is packed just below 10kb.

Search Google for "Blue Anvil Journal Anti-aliased Rounded Corners" and the first result should be a link to the post of the packed version of it. Then all you'll need is JQuery to get it to work. Use the packed version of that as well. jquery[dot]com

[dudefromthenet]

Originally Posted by suedenem

There are a few JS solutions which do the job well, Nifty Cube (IMO) being the pick of the bunch:

Nifty Corners Cube - freedom to round

The antialiasing quality of nifty corners is not very good. They only look good if the background color is similar to that of the box.

Generating corners with markup, like spiffy corners does, is not a good idea, because it will slow down rendering.

The solution I have posted before is the most flexible one I could find

[KarateRobot]

NiftyCorners Cube is very slick, but I have used it on a couple of sites for clients and found that it can seriously increase the load time of the page if you've got a lot of rounded areas to render. It also caused the page to flicker in IE, due to the delay in rendering the rounded corners.

So, for me the solution was to only use it on boxes that had no height or width specified, and then to use images on everything else.

If all the extra requests are an issue, you could try using css sprites.

Another gotcha with Niftycube is that if you're using a gradient background, you may see that the area behind the rounded corners isn't always the same color as the page background.

[zero_cool]

Hi there!

I found this thread while vacuum-cleaning the internet for a solution of my problem! The thing is that I want to use NiftyCorners (or something similar) to get rounded menu buttons. BUT, I need to use it on a background image, which doesnt work, small "triangles" with the background color appears where the "bends" are. Does anyone know how to get around this? The only thing I know is that I dont want to use an image-based menu, because I want to be able to change the colors in an easy way.
I would be very very thankful for any help!

Best regards,
Wille (Sweden)

[doffy]

Then you'll just have to save your picture as a transparent image, if I understand your problem correctly.

If the background from the OMFGCreator differs from the colour you will be using as background, this kind of thing naturally happens.

[feha]

Originally Posted by Darkleo

I am looking for a simple, easy to use, rounded corners technique.

Check here
Single image rounded corners - CSS - Tutorials - Vision.To Design

[Ixis]

God sometimes I hate web design when a relatively simple task like this can end up being such a huge chore with no obvious right answer, instead just a bunch of passable solutions, each with their own ins and outs.

[INXS]

Originally Posted by Ixis

God sometimes I hate web design when a relatively simple task like this can end up being such a huge chore with no obvious right answer, instead just a bunch of passable solutions, each with their own ins and outs.

Try this - [example] Nifty Corners: Nifty Corners: HTML CSS rounded corners

The code below shows how to get rounded corners using CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="niftycorners.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

and use an external css file:

body {
	padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
}
h1, h2, p {
	margin: 0 10px;
}
h1 {
	font-size: 250%;color: #FFF;
}
h2 {
	font-size: 200%; color: #f0f0f0;
}
p {
	padding-bottom:1em;
}
h2 {
	padding-top: 0.3em;
}
div#nifty { 
	margin: 0 10%;background: #9BD1FA;
}
b.rtop, b.rbottom {
	display:block;background: #FFF;
}
b.rtop b, b.rbottom b {
	display:block;height: 1px;
    overflow: hidden; background: #9BD1FA;
}
b.r1 {
	margin: 0 5px;
}
b.r2 {
	margin: 0 3px;
}
b.r3 { 
	margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
	margin: 0 1px;
	height: 2px;
}

I hope this helps. The only thing to do now is just adjust heights and widths to your liking.

Cheers!

edit: i noticed a few already posted the link. Well, i just wanted to post here, to be more simple so that members dont need to read read read.

[hac]

Some more techniques that haven't been mentioned:
roundedcornr.com (css)
curvycorners.net (javascript)
blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery (javascript)