用途
新着
履歴
分類

CSS3 角を丸くする

CSS3 角を丸くする
CSSのみで要素の角を丸くする表現のサンプルです。

丸角(まるかど)、角丸(かどまる)などと呼ばれることがありますが、角を丸くする表現はよく使われます。

ひと昔前までは、角のための画像をわざわざ作っていましたが、今ではスタイルシートで簡単に表現することができます。

   

すべての角を丸くする

半径:10px
border-radius: 10px;

一部の角を丸くする

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

一括で指定する

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

角の円弧を楕円にする

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

以前は以下のようにベンダープレフィックス(各ブラウザ専用接頭語)をつけていましたが、2015年現在ではほぼすべてのブラウザが対応しているので、不要と思います。

環境の古いユーザに対しては、角が丸くなりませんが致命的なエラーではないので、大きな懸念ではないでしょう。

        border-radius: 10px; //CSS草案
   -moz-border-radius: 10px; //Chrome、Safari 用
-webkit-border-radius: 10px; //Firefox用
公開 2019-07-31 22:08:47
更新 2022-01-31 01:46:05
このページの二次元コード
CSS3 角を丸くする

人気のサンプル

search -  category -  about
© 2024 kipure
Top