gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

516bookmark

CSS3の角丸

ベンダープレフィックス

※-webkit・・・Safari,Google Chrome用
※-moz-・・・Firefox用

全体

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

まとめて記述(左上 右上 右下 左下 の順)

border-radius: 5px 10px 5px 10px;

左上

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

右上

border-top-right-radius: 10px; 
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;

左下

border-bottom-left-radius: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-moz-border-radius-bottomleft: 10px;

右下

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