-moz-outline-radius

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

Firefox などの Mozilla アプリケーションにおいて、-moz-outline-radius は CSS のプロパティで、要素の輪郭線 (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;

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

値

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

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

<length>

取りうる値については <length> をご覧ください。

<percentage>

<percentage>。詳しくは border-radius を参照してください。

  • 1 つの値が設定された場合、全 4 隅に適用します。
  • 2 つの値が設定された場合、最初の値は左上と右下の角に、2 番目の値は右上と左下の角に適用します。
  • 3 つの値が設定された場合、最初の値は左上の角に、2 番目の値は右上と左下の角に、3 番目の値は右下の角に適用します。
  • 4 つの値が設定された場合、最初の値は左上の角に、2 番目の値は右上の角に、3 番目の値は右下の角に、4 番目の値は左下の角に適用します。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承なし
パーセント値一括指定の次の各プロパティとして
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

Error: could not find syntax for this item

例

輪郭線を丸める

注: この例は Firefox 以外のブラウザーで閲覧したときに、期待される効果が表示されません。

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;
}

結果

メモ

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

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

BCD tables only load in the browser

関連情報