What is the best technique for rounded corners

HTML & CSS
1

What is the best technique for rounded corners either with images or no images but should work with all common browsers at least starting with IE7

Here is what i use

<html>
<HEAD>
	<TITLE>Title</TITLE>
	<style type="text/css">
BODY 
{
	font-family: Verdana;
	background-color:green;
	color:#0A0A0A;
}
.topcorners 
{ 

	background: url(http://cdn.sitepoint.com/forums/images/topright.gif) no-repeat top right; 
}
.bottomcorners 
{
	background: url('images/bottomright.gif') no-repeat top right; 
}

.Content 
{
	width: 80%;
	background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
}
.roundedcornerimg 
{
   width: 20px;
   height: 20px;

}

	</style>

</HEAD>
<body>
<div class="Content">
	<div class="topcorners"><img src="images\	opleft.gif"  class="roundedcornerimg"  /></div>
	All content goes here
	<div class="bottomcorners"><img src="images\\bottomleft.gif"  class="roundedcornerimg"  /></div>
</div>

</body>
</html>

Sorry i don’t have a link to this
Do you guys have any better solutions ?

2

The method you are using is… flawed at best - Those images have NO business in your HTML…

These days I’m using CSS3 for that sort of thing and to hell with IE8 and lower. They get square corners, OH WELL…

Though when I do “need” support all the way back to IE5.5, I use this technique:
http://www.cutcodedown.com/tutorials/eightCorners/page1.html

Which allows me to use a single image file (less handshakes so less load time issues), NOT put images in the markup (so CSS off the page isn’t a disaster), etc, etc, etc…

Remember, separation of presentation from content – those images are presentation, and as such don’t belong in IMG tags – EVER.

Oh, and don’t forget to use a doctype so IE isn’t in quirks mode, STOP typing in tags in uppercase like it’s 1997, etc, etc…

3

if you want to use shadows as well then you’ll have to use the three image way prob. http://www.visibilityinherit.com/code/vertically-liquid-round-corner-box.php

4

What is the best technique for rounded corners either with images or no images but should work with all common browsers at least starting with IE7

Currently, I’d say a technique described here: http://cssglobe.com/post/3714/css-sprites-rounded-corners, for which you can make the one necessary small-disc sprite image here: http://www.pagecolumn.com/tool/roundcorner.htm.

5

That’s ok but uses one too many elements and too many classes for my liking :). It doesn’t work in IE6 either (at least the author doesn’t know the right way to make it work in IE6) and you can’t use absolutely placed corners in IE6 anyway as they will be 1px out on odd pixel widths. If you are not supporting IE6 then I’d probably drop support for 7 and 8 also and then use border radius.

Or if you just want IE8+ support you can use the :before and :after pseudo elements to place two of the corners with the original element holding the third corner which means only one extra element is needed for the fourth corner.

Round corners have always been a pain because of the extra elements needed. Using sptites is the best approach but if you want shadows and transparent corners then it soon gets complicated as Eric mentioned. I have an old demo here that uses two sprite images for shadows and transparent corners but is very heavy on mark up.

In the end it all boils down to finding hooks to hang your background images on. You can find a round-up of techniques here but Deathshadow’s and Erics methods are better than most you will find.

6

CSS3, and if rounded corners for older browsers is really necessary: http://css3pie.com

Although, it’s not wise to combine rounded corner fixes with javascript animations, as they won’t work very well.

7

Thanks every one for your posts.

Gotta say I prefer Frank’s method.
Eric’s method is really easy but it goes only on fixed widths. I had some problems changing the “Eight Corners” according to my images, playing around with those pixels & getting it to work in Firefox. Thanks to Paul for the link to the round up of techniques.