mozilla

border-radius

概要

CSS の border-radius プロパティはボーダーの角を丸める。角の曲線を 1 つか 2 つの半径で定義して、角の形を円か楕円にする。

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

このプロパティが指定されると background によって与えられた背景も (たとえボックスにボーダーが指定されていなくても) 丸まる。

border-radius プロパティは border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius の4つを指定する短縮形プロパティである。

短縮形プロパティでは普通、'border-radius: 0 0 inherit inherit' のような部分的な継承はできず、既存の細分化されたプロパティの宣言を上書きします。こうした場合には、細分化されたプロパティを使う必要があります。
  • 初期値 (それぞれ)0
  • 適用対象 全要素。ただし、UAは collapse型のテーブルかインラインテーブル要素には適用する必要はない。テーブル要素内部の挙動は現時点では未定義
  • 継承 しない
  • 相対値の基準 対応するボーダーボックスの値
  • メディア visual
  • 計算値 (それぞれ)絶対的な length または percentage
  • アニメーションの可否

構文

border-radius:   <border-radius>{1,4} [ / <border-radius>{1,4}]?

2, 3, 4 個の <border-radius> を値にとることができる。また、その後にスラッシュ / および 2, 3, 4 個の <border-radius> を続けて書くことができる。<border-radius> は次に示す項目のうちどれかを示す。

<length>
利用可能な値は <length> を参照されたい。
<percentage>
水平方向のパーセンテージはボーダーボックスの幅を、垂直方向のパーセンテージはボーダーボックスの高さを参照する。

値が 1 つ指定された場合、4つの角のすべて にその値が適用される。
値が 2 つ指定された場合、1 番目の値は top-left および bottom-right に、2 番目の値は top-right および bottom-left に適用される。
値が 4 つ指定された場合、それらは指定された順に top-left, top-right, bottom-right, bottom-left に適用される。
値が 3 つ指定された場合、2 番目の値が top-right および bottom-left に適用される。

2 つの値セットがスラッシュにより区切られている場合、スラッシュより前の値は水平方向の径に、スラッシュより後の値は垂直方向の径となる。スラッシュが省略された場合、値は水平方向と垂直方向の径になる。

たとえば、次の宣言があるとする。

border-radius: 1em/5em;
/* これは次に等価である */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* これは次に等価である */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px:

サンプル

  border: solid 10px;
  /* ボーダーが「D」のように描画される */
  border-radius: 0 50px 50px 0;
   border: groove 1em red;
   border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
  border: none;
  border-radius: 40px 10px;
  border: none;
  border-radius: 50%;

注釈

  • border-styledotted, dashed が指定された場合、角丸部分のスタイルが solid になるバグがある (バグ 382721)。
  • border-radiusborder-collapsecollapse が指定されたテーブルには適用されない。
  • 古い Safari/WebKit は複数の値を標準と異なるように処理する (下記を参照)。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 4.0 (2.0)
1.0 (1.7 or earlier)-moz
4.0
0.2-webkit
9.0 10.5 5.0
3.0-webkit
楕円ボーダー 3.5 (1.9.1) yes yes yes yes。下記参照
4 つの値 yes 4.0 yes yes 5.0
パーセンテージ yes。以前は でした(下記参照) yes yes 11.5 5.1
機能 iOS Safari Opera Mini Opera Mobile Android Browser
基本サポート 3.2-webkit 未サポート 未サポート 2.1-webkit
楕円ボーダー ? 未サポート 未サポート ?
4 つの値 ? 未サポート 未サポート ?
パーセンテージ ? 未サポート 未サポート ?

<percentage>

  • 古い Chrome と Safariでサポートされていません(2010 年 9月に修正されました
  • Opera 11.50 以前ではバグがあります
  • Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
  • 古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません

Gecko notes

Gecko 2.0 で -moz-border-radiusborder-radius に改称されました。-moz-border-radius は Gecko 12.0 まで別名としてサポートされました。CSS3 標準に従うため、Gecko 2.0 では

  • 仕様に沿うために <割合> 値 の扱いを変えました。border-radius: 50%; である任意のサイズの要素に、楕円をボーダーとして指定できます。
  • 丸まった角は、コンテンツや画像をクリップします (if overflow: visible がセットされていない場合)
註: プレフィックス版 (-moz-border-radius) のサポートは、Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) で取り除かれました。

WebKit に関する註釈

古い Safari や Chrome (WebKit 532.5 より前) では、次のような実装上の違いがある。

  • 短縮形プロパティに 3 つ、4 つの値を指定することはできない。角にそれぞれ異なる径を与えたい場合は、 各角のプロパティを使わなければならない
  • スラッシュ / 記法に対応していない。もし2 つの値をスペースで区切って指定した場合、全ての角に対し、1 番目の値が水平方向、2 番目の値が垂直方向を指定することになる。
    /* これらは等価である */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Opera に関する註釈

Opera 11.60 以前は、border-radius を置換要素に用いると角の丸みがつきませんでした。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: myakura, ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す