CSSボーダー半径プロパティ
例
2つの<div>要素に丸みを帯びた角を追加します。
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
border-radius
プロパティは、要素の角の半径を定義します。
ヒント:このプロパティを使用すると、要素に丸みを帯びた角を追加できます。
このプロパティには、1〜4個の値を指定できます。ルールは次のとおりです。
4つの値-border-radius:15px 50px 30px 5px; (最初の値は左上隅に適用され、2番目の値は右上隅に適用され、3番目の値は右下隅に適用され、4番目の値は左下隅に適用されます):
3つの値-border-radius:15px 50px 30px; (最初の値は左上隅に適用され、2番目の値は右上隅と左下隅に適用され、3番目の値は右下隅に適用されます):
2つの値-border-radius:15px 50px; (最初の値は左上隅と右下隅に適用され、2番目の値は右上隅と左下隅に適用されます):
1つの値-border-radius:15px; (値は、均等に丸められる4つのコーナーすべてに適用されます。
デフォルト値: | 0 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | オブジェクト.style.borderRadius = "25px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS構文
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
注:各半径の4つの値は、左上、右上、右下、左下の順序で指定されます。左下を省略した場合は右上と同じです。右下を省略した場合は左上と同じです。右上を省略した場合は左上と同じです。
プロパティ値
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
背景色の要素に丸みを帯びた角を設定します。
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
例
境界線のある要素に丸みを帯びた角を設定します。
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
例
背景画像のある要素に丸みを帯びた角を設定します。
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
例
また、これに注意してください:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
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; */
関連ページ
CSSチュートリアル:CSSの丸みを帯びた角
HTML DOMリファレンス:borderRadiusプロパティ