-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} ]?

ここで
<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 では、このプロパティが完全になくなるかもしれません。 バグ 593717 を参照してください。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser