What is the best way to create rounded corners using CSS?

border-radius:

.my_rounded_corners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

.my_rounded_corners{
border: 1px solid #ccc;

-moz-border-radius-topleft: 10px;
-khtml-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;

-moz-border-radius-topright: 0px;
-khtml-border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;

-moz-border-radius-bottomleft: 4px;
-khtml-border-bottom-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;

-moz-border-radius-bottomright: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}

div.box {
    background-color: yellow;
    border: 1px solid red;
    border-radius: 5px;
    behavior: url(corners.htc);
}

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;

<div class="Rounded">
    // content
    <div class="RoundedCorner RoundedCorner-TopLeft"></div>
    <div class="RoundedCorner RoundedCorner-TopRight"></div>
    <div class="RoundedCorner RoundedCorner-BottomRight"></div>
    <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded
{
    position: relative;
}

.Rounded .RoundedCorner
{
    position: absolute;

    background-image: url('SpriteSheet.png');
    background-repeat: no-repeat;

    overflow: hidden;

    /* Size of the rounded corner images */
    height: 5px;
    width: 5px;
}

.Rounded .RoundedCorner-TopLeft
{
    top: 0;
    left: 0;

    /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight
{
    top: 0;
    right: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight
{
    right: -1px;
}

.Rounded .RoundedCorner-BottomLeft
{
    bottom: 0;
    left: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft
{
    bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight
{
    bottom: 0;
    right: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight
{
    bottom: -20px;
    right: -1px;
}

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

<div class="s">Content</div>

$("div.s")
  .wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
  .prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

/*rounded corner orange box - no title*/
.s{position:relative; margin: 0 auto 15px; zoom:1;}
  .s-iwrap{border: 1px solid #FF9933;}
    .s-iwrap2{margin: 12px;}
  .s .br,.s .bl, .s .tl, .s .tr{
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height:1px;
    font-size:1px;
    width:9px;
    height:9px;
    position:absolute;}
  .s .br{bottom: 0; right:0; background-position: bottom right;}
  .s .bl{bottom: 0; left: 0;background-position: bottom left;}
  .s .tl{top:0; left: 0;background-position: top left;}
  .s .tr{top:0; right: 0;background-position: top right;}

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
    	border: 1px solid #FFF;
    	postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
    	background-image: url(topleft.png);
    	position: absolute;
    	top: -1px;
    	left: -1px;
    	width: 30px;
    	height: 30px;
    	z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
    	background-image: url(topright.png);
    	position: absolute;
    	top: -1px;
    	right: -1px;
    	width: 30px;
    	height: 30px;
    	z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
    	background-image: url(bottomleft.png);
    	position: absolute;
    	bottom: -1px;
    	left: -1px;
    	width: 30px;
    	height: 30px;
    	z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
    	background-image: url(bottomright.png);
    	position: absolute;
    	bottom: -1px;
    	right: -1px;
    	width: 30px;
    	height: 30px;
    	z-index: 2;
    }
</style>