-moz-outline-radius

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

Firefox などの Mozilla アプリケーションにおいて、 CSS-moz-outline-radius プロパティは、要素の輪郭線 (outline) の角を丸くするために使用することができます。

/* 1つの値 */
-moz-outline-radius: 25px;

/* 2つの値 */
-moz-outline-radius: 25px 1em;

/* 3つの値 */
-moz-outline-radius: 25px 1em 12%;

/* 4つの値 */
-moz-outline-radius: 25px 1em 12% 4mm;

/* グローバル値 */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

このプロパティは、一括指定であり、4つのプロパティ -moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright, -moz-outline-radius-bottomleft を設定します。

初期値一括指定の各プロパティとして
適用対象すべての要素
継承なし
パーセンテージ一括指定の各プロパティとして
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法で定義される一意のあいまいでない順序

構文

楕円形の輪郭線や <percentage> の値は、 border-radius で説明されている構文に従います。

1~4つの <outline-radius> 値で、次のうちの一つを表します。

<length>
取りうる値については <length> をご覧ください。
<percentage>
<percentage>。詳しくは border-radius を参照してください。
  • 1つの値が設定された場合、全4隅に適用します。
  • 2つの値が設定された場合、最初の値は左上と右下の角に、二番目の値は右上と左下の角に適用します。
  • 3つの値が設定された場合、最初の値は左上の角に、二番目の値は右上と左下の角に、三番目の値は右下の角に適用します。
  • 4つの値が設定された場合、最初の値は左上の角に、二番目の値は右上の角に、三番目の値は右下の角に、四番目の値は左下の角に適用します。

形式文法

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

where
<outline-radius> = <length> | <percentage>

HTML

<p>This element has a rounded outline!</p>

CSS

p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

結果

注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。

メモ

  • dotted または dashed で角を丸めた輪郭線は、 Firefox 50 までは実戦で描かれていました。 バグ 382721
  • 将来のバージョンの Gecko/Firefox では、このプロパティが完全になくなるかもしれません。 バグ 315209 を参照してください。

仕様書

このプロパティはどの CSS 標準で定義されていません。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
-moz-outline-radius
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 1.5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。