CSSborder -bottom-right-radiusプロパティ
例
2つの<div>要素の右下隅に丸みを帯びた境界線を追加します。
#example1 {
border: 2px solid red;
border-bottom-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-right-radius: 50px
20px;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
border-bottom-right-radius
プロパティは、右下隅の半径を定義します。
ヒント:このプロパティを使用すると、要素に丸みを帯びた境界線を追加できます。
デフォルト値: | 0 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.borderBottomRightRadius = "25px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
border-bottom-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS構文
border-bottom-right-radius: length|% [length|%]|initial|inherit;
注: 2つの値を設定した場合、最初の値は下の境界線用で、2番目の値は右の境界線用です。2番目の値を省略すると、最初の値からコピーされます。いずれかの長さがゼロの場合、角は丸くなく、正方形になります。
プロパティ値
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-right corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-right corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
右下隅に丸みを帯びた境界線をパーセントで追加します。
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-right-radius: 40%;
}
関連ページ
CSSチュートリアル:CSSの丸みを帯びた角
HTML DOMリファレンス:borderBottomRightRadiusプロパティ