CSS3 border-radius プロパティ
 完全な CSS3 リファレンス
例
div 要素に角丸のボーダーを追加します:
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
} |
Try it yourself »
|
ブラウザ・サポート
border-radius プロパティは、IE9+、Firefox 4+、Chrome、Safari 5+、および Opera でサポートされています。
Firefox 3.6 以前では、代替手段として -moz-border-radius プロパティをサポートしています。
定義と用法
border-radius プロパティは、4つの border-*-radius プロパティを設定するためのショートハンド・プロパティです。
チップ: このプロパティにより、要素へ角丸のボーダーを追加することができます!
| デフォルト値: |
0 |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.borderRadius="5px" |
構文
| border-radius: 1-4 length|% / 1-4 length|%; |
注: 各半径に対する4つの値は、左上、右上、右下、左下の順に設定されます。
左下が省略された場合、右上と同じ値になります。
右下が省略された場合、左上と同じ値になります。
右上が省略された場合、左上と同じ値になります。
| 値 |
説明 |
| length |
コーナーの形状を定義します |
| % |
コーナーの形状を % で定義します |
例 1
border-radius:2em;
は、次と同じです:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
|
例 2
border-radius: 2em 1em 4em / 0.5em 3em;
は、次と同じです:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
|
関連ページ
CSS3 チュートリアル: CSS3 Borders
完全な CSS3 リファレンス
|