css3 border-radius

border-radius 係可以好簡單整到圓角邊

支援的browser: firefox, chrome, safari, ie9
ff4 以上先supoort 冇browser prefix

ie9 唔駛prefix的

.border_radius{

    border:10px solid #ffdd00;

    

    /*

    *4個角都是以20px 為radius 的圓角

    *(圖1)

    */

    border-radius: 20px; 

    -webkit-border-radius: 20px; 

    -moz-border-radius: 20px;    

    

    

    /*

    *左上角 同 右下角 是10px, 右上角 同 左下角 是40px

    *有-webkit-字頭會好奇怪, 要小心~!

    *(圖2)

    */

    border-radius: 10px 40px;

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

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

    

    

    /*

    *左上角 是10px, 右上角 同 左下角 是20px, 右下角 是40px

    *(圖3)

    */

    border-radius: 10px 20px 40px;

    -webkit-border-radius: 10px 20px 40px;

    -moz-border-radius: 10px 20px 40px;

    

    /*

    *由左上角開始順時針的4個角

    *(圖4)

    */

    border-radius: 10px 20px 30px 40px;    

    -webkit-border-radius: 10px 20px 30px 40px;    

    -moz-border-radius: 10px 20px 30px 40px;    

    

    /*

    *border-*, -webkit-border-*, -moz-border-radius-* *: 指某一個角 

    *-moz- 的寫法有少少唔同, 要小心~!

    *(圖4)

    */

    border-top-left-radius:10px;

    border-top-right-radius:20px;

    border-bottom-right-radius:30px;

    border-bottom-left-radius:40px;    

    -webkit-border-top-left-radius:10px;

    -webkit-border-top-right-radius:20px;

    -webkit-border-bottom-right-radius:30px;

    -webkit-border-bottom-left-radius:40px;    

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

    -moz-border-radius-topright:20px;

    -moz-border-radius-bottomright:30px;

    -moz-border-radius-bottomleft:40px;

}

圖1

圖2

圖3

圖4