/*

每個角都不相同的矩形

*/

#roundCornerI{

  font-family: Arial;/*可選字型*/
  border: 5px solid #dedede;/*邊框樣式*/
  -moz-border-radius-topleft: 15px;/*左上角圓角半徑:用於Firefox*/
  -moz-border-radius-topright: 0px;/*右上角圓角半徑*/
  -moz-border-radius-bottomright: 15px;/*右下角圓角半徑*/
  -moz-border-radius-bottomleft: 0px;/*左下角圓角半徑*/
  -webkit-border-top-left-radius: 15px;

/*左上角圓角半徑:用於safari和chrome*/
  -webkit-border-top-right-radius: 0px;/*右上角圓角半徑*/
  -webkit-border-bottom-left-radius: 0px;/*左下角圓角半徑*/
  -webkit-border-bottom-right-radius: 15px;/*右下角圓角半徑*/
  padding: 15x 25px;/*內部邊距*/
  height: inherit;/*高度:繼承父容器*/
  width: 590px;/*寬度*/

}

效果如圖：

/*

四個角都是圓角的矩形

*/

#roundCorderC{

    font-family: Arial;

    border: 5px solid #dedede;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    padding: 15px 25px;

    height: inherit;

    width: 590px

}

效果如圖：

注：1、上圖是在我的機器上chrome瀏覽器顯示的效果，IE10無法正常顯示（微軟真垃圾...）。

2、因為邊框顏色，陰影效果在chrome瀏覽器上支援效果不好，就不寫了。