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

このページの二次元コード

同じカテゴリーのサンプル