English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS border-top-right-radius属性は、要素の枠線の「右上角」に丸みを加える形を設定します。
以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの属性の使用構文の説明です。
デフォルト値: | 0 |
---|---|
適用: | すべての要素 |
継承: | ありません |
アニメーション制作可能: | はい。参照してください アニメーション属性。 |
バージョン: | CSS3の新しい機能 |
JavaScript構文: | object object.style.borderTopRightRadius="5px" |
注意:border-top-right-radiusは、エッジや値が未定義であっても、要素の背景を丸くする属性です。
この属性の構文は以下の通りです:
border-top-right-radius: [ length | percentage ]1 または 2 values | initial | inherit
このショートカット記法は、1つまたは2つのスペースで区切られた値を使用できます。
オプションの2つ目の長さ値は、右上角の垂直半径を定義し、そのため角の形状は四分の1円錐です。
2つ目の長さを省略した場合または2つ目の長さと同じ場合、角の形状は四分の1円です。どちらかの長さが0の場合、角は四角形ではなく円角になります。
以下の例では、borderの使用方法を示しています。-top-right-radius属性。
div { border: 2px solid #f08080; border-top-right-radius: 20px; }試してみる‹/›
以下のテーブルは、この属性の値を説明しています。
値 | 説明 |
---|---|
length | length値(px、pt、cm、emなど)で指定できますが、負の値の使用は許可されていません。 |
percentage | 半径の大きさは、パーセントで指定します。2つの値がある場合、1つ目の値は要素のフレームの幅に対するパーセント(すなわち、水平半径)であり、2つ目の値は要素のフレームの高さに対するパーセント(すなわち、垂直半径)です。負の値の使用は許可されていません。 |
initial | この属性をデフォルト値に設定します。 |
inherit | 指定された場合、関連する要素は親要素のborderを使用します。-top-right-radiusの属性値。 |
border-top-right-radius属性のブラウザの互換性、以下のテーブルの数字は、その属性をサポートするブラウザの最低バージョンを示します;すべての主要ブラウザはこの属性をサポートしています。
|
参照教程:CSS Border、CSS3 Border。
関連属性:border-radius、border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius。