スタイルborderRadiusプロパティ
例
div要素に丸みを帯びた境界線を追加します。
document.getElementById("myDIV").style.borderRadius = "25px";
定義と使用法
borderRadiusプロパティは、4つのborderRadiusプロパティを設定または返すための省略形のプロパティです。
4つの境界半径プロパティは(この順序で)次のとおりです。
borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius
ヒント:このプロパティを使用すると、要素に丸みを帯びた角を追加できます。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
borderRadius | Yes | 9.0 | Yes | Yes | Yes |
構文
borderRadiusプロパティを返します。
object.style.borderRadius
borderRadiusプロパティを設定します。
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
注:各半径の4つの値は、左上、右上、右下、左下の順序で指定されます。左下を省略した場合は右上と同じです。右下を省略した場合は左上と同じです。右上を省略した場合は左上と同じです。
プロパティ値
Value | Description |
---|---|
length | Defines the shape of the corners. Default value is 0 |
% | 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 |
技術的な詳細
デフォルト値: | 0 |
---|---|
戻り値: | 要素のborder-radiusプロパティを表す文字列 |
CSSバージョン | CSS3 |
関連ページ
CSSリファレンス:border-radiusプロパティ