CSS3 border-radiusの使いかた

CSS3のお勉強。
border-radiosで画像を使わずに角丸をつくる方法。
Firefox, Safari, GoogleChromeで使える。IEやオペラでも使えるみたいだけど、別途JavaScriptが必要みたい。

border-radius sample1 - jsdo.it - share JavaScript, HTML5 and CSS

（例）
　-webkit-border-radius:10px;　/* safari, Google Chrome */

で4角に10pxの角丸がつく。

下記は4角それぞれに角丸の大きさを指定する方法。
※-webkitと-mozで書き方が違うので注意。

（例）
　/* safari, Google Chrome */
　-webkit-border-top-left-radius:30px;　/* 左上 */
　-webkit-border-top-right-radius:60px;　/* 右上 */
　-webkit-border-bottom-left-radius:60px;　/* 左下 */
　-webkit-border-bottom-right-radius:0;　/* 右下 */
　/* Firefox */
　-moz-border-radius-topleft:30px;　/* 左上 */
　-moz-border-radius-topright:60px;　/* 右上 */
　-moz-border-radius-bottomleft:60px;　/* 左下 */
　-moz-border-radius-bottomright:0;　/* 右下 */

線だけもできる。

（例）
　background:#fff;
　border:#cc0000 3px solid;
　-webkit-border-radius:10px;

参考サイト：CSS Lecture

CSS3でググるといつもCSS Lectureさんにたどり着くなぁ。お世話になってます！（＞人＜）