なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在（2010/01/17） Candidate Recommendation（勧告候補）なので、まだ仕様が変更される可能性が有りますが、勧告候補まで進むとブラウザへの実装を呼びかけることになるため、大きな仕様変更は無いかと思います。
これにタイミングが有ってたのかわかりませんが、Chrome4ではプレフィックス（接頭辞）を付けなくても適用されるみたいです。

値

[ <長さ>｜<パーセント> ] [ <長さ>｜<パーセント> ]?｜inherit

初期値

0

適用される要素

全ての要素。ただし、border-collapseプロパティの値がcollapseのテーブル要素は除く。

継承

しません

パーセント値

ボーダーボックスに対する割合

メディア

visual

Forefoxで実装するにはプロパティにプレフィックス「-moz-」を付ける必要が有り、プロパティ名も独自実装のため仕様とは異なっているので注意が必要です。
WebKit系（SafariやChrome）で実装するには「-webkit-」を付けます。

border-radius個別指定のサンプル 01

<div class="sample01">
<p class="radius01">border-top-right-radius: 15px;</p>
<p class="radius02">border-bottom-right-radius: 15px;</p>
<p class="radius03">border-bottom-left-radius: 15px;</p>
<p class="radius04">border-top-left-radius: 15px;</p>
</div>

.sample01 {
  margin: 20px;
}

.sample01 p {
  padding: 10px;
  background: #333;
  color: #fff;
}

.sample01 p.radius01 {
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
}

.sample01 p.radius02 {
  -webkit-border-bottom-right-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  border-bottom-right-radius: 15px;
}

.sample01 p.radius03 {
  -webkit-border-bottom-left-radius: 15px;
  -moz-border-radius-bottomleft: 15px;
  border-bottom-left-radius: 15px;
}

.sample01 p.radius04 {
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
}

Firefoxの独自実装はプロパティ名が他と異なっている点に注意して下さい。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-top-right-radius: 15px;

border-bottom-right-radius: 15px;

border-bottom-left-radius: 15px;

border-top-left-radius: 15px;

border-radius個別指定のサンプル 02

<div class="sample02">
<p class="radius01">border-top-right-radius: 50px 5px;</p>
<p class="radius02">border-bottom-right-radius: 100px 15px;</p>
<p class="radius03">border-bottom-left-radius: 8px 45px;</p>
<p class="radius04">border-top-left-radius: 150px 50px;</p>
</div>

.sample02 {
  margin: 20px;
}

.sample02 p {
  padding: 20px;
  background: #00156b url(../img/share/bg_header.gif);
  color: #fff;
}

.sample02 p.radius01 {
  -webkit-border-top-right-radius: 50px 5px;
  -moz-border-radius-topright: 50px 5px;
  border-top-right-radius: 50px 5px;
}

.sample02 p.radius02 {
  -webkit-border-bottom-right-radius: 100px 15px;
  -moz-border-radius-bottomright: 100px 15px;
  border-bottom-right-radius: 100px 15px;
}

.sample02 p.radius03 {
  -webkit-border-bottom-left-radius: 8px 45px;
  -moz-border-radius-bottomleft: 8px 45px;
  border-bottom-left-radius: 8px 45px;
}

.sample02 p.radius04 {
  -webkit-border-top-left-radius: 150px 50px;
  -moz-border-radius-topleft: 150px 50px;
  border-top-left-radius: 150px 50px;
}

値を二つ指定すると、前が水平方向の半径を指定し、後ろが垂直方向の半径を指定できます。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-top-right-radius: 50px 5px;

border-bottom-right-radius: 100px 15px;

border-bottom-left-radius: 8px 45px;

border-top-left-radius: 150px 50px;

何となく、どう指定すればどういう曲線を描くのかわかるかもですが、図で描くと左記のような感じです。
よく分かんない場合色々試してみてください。

こんな感じで色々楽しめるので個人サイト等では自由に使っていけると思いますが、現状ではブラウザによる実装状況もまちまちなので、その辺りも確認しながら使った方が良いかと思います。

角を丸くするだけなのにこのプロパティが使えるだけで、角丸なサイトのデザイン再現用のdiv要素が減り、コーディングもかなり楽になってきます。
とはいえ、角丸は情報を提供するだけなら有っても無くても変わりませんが、ユーザーに与える印象は大きく異なってきます。なので、IEユーザーが多い現状では、デザインとして重要な部分は従来通り背景画像にするなど、訪れるユーザーの事も考慮しながら使うと良いかと思います。

なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在（2010/01/17） Candidate Recommendation（勧告候補）なので、まだ仕様が変更される可能性が有りますが、勧告候補まで進むとブラウザへの実装を呼びかけることになるため、大きな仕様変更は無いかと思います。
これにタイミングが有ってたのかわかりませんが、Chrome4ではプレフィックス（接頭辞）を付けなくても適用されるみたいです。

プロパティの解説

値

[ <長さ>｜<パーセント> ]{1,4} [ / [ <長さ>｜<パーセント> ]{1,4} ]?｜inherit

初期値

0

適用される要素

全ての要素。ただし、border-collapseプロパティの値がcollapseのテーブル要素は除く。

継承

しません

パーセント値

ボーダーボックスに対する割合

メディア

visual

border-radiusプロパティは、Forefoxで実装するにはプロパティにプレフィックス「-moz-」を付ける必要が有り、WebKit系（SafariやChrome）で実装するには「-webkit-」を付けます。

border-radiusのサンプル 01

<div class="sample01">
<p class="radius01">border-radius: 10px;</p>
<p class="radius02">-webkit-border-radius: 10px;</p>
<p class="radius03">-moz-border-radius: 10px;</p>
</div>

.sample01 p {
  margin: 20px;
  padding: 15px;
  background: #00208b;
  color: #fff;
}

.sample01 p.radius01_01 {
  border-radius: 10px;
}

.sample01 p.radius01_02 {
  -webkit-border-radius: 10px;
}

.sample01 p.radius01_03 {
  -moz-border-radius: 10px;
}

まずは、もっとも簡単なサンプルで同じように四つ角の半径を指定しています。
ちなみに、border-radiusとはいえ背景色の指定などが有ればボーダーの指定が無くても大丈夫です。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radiusのサンプル 02

<div class="sample02">
<p class="radius01">border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius02">-webkit-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius03">-moz-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius04">border-border-radius: 5px 20px;。値2つのサンプルです。</p>
<p class="radius05">-webkit-border-radius: 5px 20px;。値2つのサンプルです。</p>
<p class="radius06">-moz-border-radius: 5px 20px;。値2つのサンプルです。</p>
</div>

.sample02 p {
  margin: 20px;
  padding: 15px;
  border: 5px solid #e17b1b;
}

.sample02 p.radius06,
.sample02 p.radius05,
.sample02 p.radius04 {
  border-color: #008d3b;
}

.sample02 p.radius01 {
  border-radius: 5px 10px 50px 20px;
}

.sample02 p.radius02 {
  -webkit-border-radius: 5px 10px 50px 20px;
}

.sample02 p.radius03 {
  -moz-border-radius: 5px 10px 50px 20px;
}

.sample02 p.radius04 {
  border-radius: 5px 20px;
}

.sample02 p.radius05 {
  -webkit-border-radius: 5px 20px;
}

.sample02 p.radius06 {
  -moz-border-radius: 5px 20px;
}

今度は、個別に半径を指定したサンプルです。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-radius: 5px 10px 50px 20px;。値4つのサンプルです。

-webkit-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。

-moz-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。

border-border-radius: 5px 20px;。値2つのサンプルです。

-webkit-border-radius: 5px 20px;。値2つのサンプルです。

-moz-border-radius: 5px 20px;。値2つのサンプルです。

Safari4では、四つ角を個別に指定するとまったく反映されず、値が2つの場合だと変な角丸になってしまい、指定した通りには反映されないようです。また、Chrome4でも値が2の場合にプレフィックスを付けていると変な角丸になるようです。
これらの事から、現状では値は1つにしておくのが良いかと思いますが、値を2つ書く場合、以下のように宣言は独自実装から先に記述した方が良さそうです。

p.sample {
  -moz-border-radius: 5px 20px;
  -webkit-border-radius: 5px 20px;
  border-radius: 5px 20px;
}

border-radiusのサンプル 03

<div class="sample03">
<p class="radius01">border-radius: 10px / 50px;</p>
<p class="radius02">-webkit-border-radius: 10px / 50px;</p>
<p class="radius03">-moz-border-radius: 10px / 50px;</p>
</div>

.sample03 p {
  margin: 20px;
  padding: 15px;
  background: #666;
  color: #fff;
}

.sample03 p.radius01 {
  border-radius: 10px / 50px;
}

.sample03 p.radius02 {
  -webkit-border-radius: 10px / 50px;
}

.sample03 p.radius03 {
  -moz-border-radius: 10px / 50px;
}

値を半角スラッシュ（/）で区切って指定すると、スラッシュより前が水平方向の半径を指定し、後ろが垂直方向の半径を指定します。なので、この場合だと小カッコ () のような角丸になります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-radius: 10px / 50px;

-webkit-border-radius: 10px / 50px;

-moz-border-radius: 10px / 50px;

こんな感じで色々楽しめるので個人サイト等では使っていける感じですが、 / を使って指定した場合もSafari4では全く反映されなくなってしまったりと、現状ではブラウザによる実装具合の関係からも使う場合は注意が必要です。