角丸をつけるCSS

投稿日: 2011/11/13  更新日: 2017/09/29

CSS 



webkit と、moz では角丸をつけるCSSの書き方が違う。

~ 全体 ~

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 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-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;

~左下~

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

このエントリーをはてなブックマークに追加     

profile
profile

洋ちゃん

@yo-chan

システムエンジニアをしています。二児の父です。

夢は天井から床までビッシリ並んだ本棚のある書斎を作ること!