--- a/devtools/server/actors/animation-type-longhand.js
+++ b/devtools/server/actors/animation-type-longhand.js
@@ -301,16 +301,17 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
     "-moz-outline-radius-topright",
     "padding-bottom",
     "padding-left",
     "padding-right",
     "padding-top",
     "perspective",
     "right",
     "row-gap",
+    "shape-margin",
     "stroke-dashoffset",
     "stroke-width",
     "-moz-tab-size",
     "text-indent",
     "top",
     "vertical-align",
     "width",
     "word-spacing",

--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -3094,16 +3094,17 @@ exports.CSS_PROPERTIES = {
       "scroll-behavior",
       "scroll-snap-coordinate",
       "scroll-snap-destination",
       "scroll-snap-points-x",
       "scroll-snap-points-y",
       "scroll-snap-type-x",
       "scroll-snap-type-y",
       "shape-image-threshold",
+      "shape-margin",
       "shape-outside",
       "shape-rendering",
       "-moz-stack-sizing",
       "stop-color",
       "stop-opacity",
       "stroke",
       "stroke-dasharray",
       "stroke-dashoffset",
@@ -8554,16 +8555,32 @@ exports.CSS_PROPERTIES = {
       7
     ],
     "values": [
       "inherit",
       "initial",
       "unset"
     ]
   },
+  "shape-margin": {
+    "isInherited": false,
+    "subproperties": [
+      "shape-margin"
+    ],
+    "supports": [
+      6,
+      8
+    ],
+    "values": [
+      "calc",
+      "inherit",
+      "initial",
+      "unset"
+    ]
+  },
   "shape-outside": {
     "isInherited": false,
     "subproperties": [
       "shape-outside"
     ],
     "supports": [
       4,
       5,
@@ -9648,16 +9665,20 @@ exports.PREFERENCES = [
     "scroll-snap-type-y",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "shape-image-threshold",
     "layout.css.shape-outside.enabled"
   ],
   [
+    "shape-margin",
+    "layout.css.shape-outside.enabled"
+  ],
+  [
     "shape-outside",
     "layout.css.shape-outside.enabled"
   ],
   [
     "text-combine-upright",
     "layout.css.text-combine-upright.enabled"
   ],
   [

--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -2502,16 +2502,24 @@ CSS_PROP_(
     shape-image-threshold,
     shape_image_threshold,
     ShapeImageThreshold,
     0,
     "layout.css.shape-outside.enabled",
     VARIANT_HN,
     nullptr)
 CSS_PROP_(
+    shape-margin,
+    shape_margin,
+    ShapeMargin,
+    0,
+    "layout.css.shape-outside.enabled",
+    VARIANT_HLP | VARIANT_CALC,
+    nullptr)
+CSS_PROP_(
     shape-outside,
     shape_outside,
     ShapeOutside,
     CSS_PROPERTY_VALUE_PARSER_FUNCTION,
     "layout.css.shape-outside.enabled",
     0,
     nullptr)
 CSS_PROP_(

--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -6596,16 +6596,24 @@ already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetShapeImageThreshold()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetNumber(StyleDisplay()->mShapeImageThreshold);
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
+nsComputedDOMStyle::DoGetShapeMargin()
+{
+  RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
+  SetValueToCoord(val, StyleDisplay()->mShapeMargin, true);
+  return val.forget();
+}
+
+already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetShapeOutside()
 {
   return GetShapeSource(StyleDisplay()->mShapeOutside,
                         nsCSSProps::kShapeOutsideShapeBoxKTable);
 }
 
 void
 nsComputedDOMStyle::SetCssTextToCoord(nsAString& aCssText,

--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -511,16 +511,17 @@ private:
   already_AddRefed<CSSValue> DoGetScrollSnapType();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeX();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeY();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsX();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsY();
   already_AddRefed<CSSValue> DoGetScrollSnapDestination();
   already_AddRefed<CSSValue> DoGetScrollSnapCoordinate();
   already_AddRefed<CSSValue> DoGetShapeImageThreshold();
+  already_AddRefed<CSSValue> DoGetShapeMargin();
   already_AddRefed<CSSValue> DoGetShapeOutside();
 
   /* User interface properties */
   already_AddRefed<CSSValue> DoGetCaretColor();
   already_AddRefed<CSSValue> DoGetCursor();
   already_AddRefed<CSSValue> DoGetForceBrokenImageIcon();
   already_AddRefed<CSSValue> DoGetIMEMode();
   already_AddRefed<CSSValue> DoGetUserFocus();

--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -229,16 +229,17 @@ COMPUTED_STYLE_PROP(scale,              
 COMPUTED_STYLE_PROP(scroll_behavior,               ScrollBehavior)
 COMPUTED_STYLE_PROP(scroll_snap_coordinate,        ScrollSnapCoordinate)
 COMPUTED_STYLE_PROP(scroll_snap_destination,       ScrollSnapDestination)
 COMPUTED_STYLE_PROP(scroll_snap_points_x,          ScrollSnapPointsX)
 COMPUTED_STYLE_PROP(scroll_snap_points_y,          ScrollSnapPointsY)
 COMPUTED_STYLE_PROP(scroll_snap_type_x,            ScrollSnapTypeX)
 COMPUTED_STYLE_PROP(scroll_snap_type_y,            ScrollSnapTypeY)
 COMPUTED_STYLE_PROP(shape_image_threshold,         ShapeImageThreshold)
+COMPUTED_STYLE_PROP(shape_margin,                  ShapeMargin)
 COMPUTED_STYLE_PROP(shape_outside,                 ShapeOutside)
 //// COMPUTED_STYLE_PROP(size,                     Size)
 COMPUTED_STYLE_PROP(table_layout,                  TableLayout)
 COMPUTED_STYLE_PROP(text_align,                    TextAlign)
 COMPUTED_STYLE_PROP(text_align_last,               TextAlignLast)
 COMPUTED_STYLE_PROP(text_combine_upright,          TextCombineUpright)
 COMPUTED_STYLE_PROP(text_decoration,               TextDecoration)
 COMPUTED_STYLE_PROP(text_decoration_color,         TextDecorationColor)

--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3577,16 +3577,17 @@ nsStyleDisplay::nsStyleDisplay(const nsP
   , mAnimationTimingFunctionCount(1)
   , mAnimationDurationCount(1)
   , mAnimationDelayCount(1)
   , mAnimationNameCount(1)
   , mAnimationDirectionCount(1)
   , mAnimationFillModeCount(1)
   , mAnimationPlayStateCount(1)
   , mAnimationIterationCountCount(1)
+  , mShapeMargin(0, nsStyleCoord::CoordConstructor)
 {
   MOZ_COUNT_CTOR(nsStyleDisplay);
 
   // Initial value for mScrollSnapDestination is "0px 0px"
   mScrollSnapDestination.SetInitialZeroValues();
 
   mTransitions[0].SetInitialValues();
   mAnimations[0].SetInitialValues();
@@ -3650,16 +3651,17 @@ nsStyleDisplay::nsStyleDisplay(const nsS
   , mAnimationDurationCount(aSource.mAnimationDurationCount)
   , mAnimationDelayCount(aSource.mAnimationDelayCount)
   , mAnimationNameCount(aSource.mAnimationNameCount)
   , mAnimationDirectionCount(aSource.mAnimationDirectionCount)
   , mAnimationFillModeCount(aSource.mAnimationFillModeCount)
   , mAnimationPlayStateCount(aSource.mAnimationPlayStateCount)
   , mAnimationIterationCountCount(aSource.mAnimationIterationCountCount)
   , mShapeImageThreshold(aSource.mShapeImageThreshold)
+  , mShapeMargin(aSource.mShapeMargin)
   , mShapeOutside(aSource.mShapeOutside)
 {
   MOZ_COUNT_CTOR(nsStyleDisplay);
 }
 
 
 static
 void ReleaseSharedListOnMainThread(const char* aName,
@@ -3798,35 +3800,36 @@ nsStyleDisplay::CalcDifference(const nsS
    */
 
   if (mFloat != aNewData.mFloat) {
     // Changing which side we're floating on (float:none was handled above).
     hint |= nsChangeHint_ReflowHintsForFloatAreaChange;
   }
 
   if (mShapeOutside != aNewData.mShapeOutside ||
+      mShapeMargin != aNewData.mShapeMargin ||
       mShapeImageThreshold != aNewData.mShapeImageThreshold) {
     if (aNewData.mFloat != StyleFloat::None) {
-      // If we are floating, and our shape-outside or shape-image-threshold
-      // are changed, our descendants are not impacted, but our ancestor and
-      // siblings are.
+      // If we are floating, and our shape-outside, shape-margin, or
+      // shape-image-threshold are changed, our descendants are not impacted,
+      // but our ancestor and siblings are.
       //
       // This is similar to a float-only change, but since the ISize of the
       // float area changes arbitrarily along its block axis, more is required
       // to get the siblings to adjust properly. Hinting overflow change is
       // sufficient to trigger the correct calculation, but may be too
       // heavyweight.
 
       // XXX What is the minimum hint to ensure mShapeInfo is regenerated in
       // the next reflow?
       hint |= nsChangeHint_ReflowHintsForFloatAreaChange |
               nsChangeHint_CSSOverflowChange;
     } else {
-      // shape-outside or shape-image-threshold changed, but we don't need
-      // to reflow because we're not floating.
+      // shape-outside or shape-margin or shape-image-threshold changed,
+      // but we don't need to reflow because we're not floating.
       hint |= nsChangeHint_NeutralChange;
     }
   }
 
   if (mVerticalAlign != aNewData.mVerticalAlign) {
     // XXX Can this just be AllReflowHints + RepaintFrame, and be included in
     // the block below?
     hint |= NS_STYLE_HINT_REFLOW;

--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -2348,16 +2348,19 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
   const nsTimingFunction& GetAnimationTimingFunction(uint32_t aIndex) const
   {
     return mAnimations[aIndex % mAnimationTimingFunctionCount].GetTimingFunction();
   }
 
   // The threshold used for extracting a shape from shape-outside: <image>.
   float mShapeImageThreshold = 0.0f; // [reset]
 
+  // The margin around a shape-outside: <image>.
+  nsStyleCoord mShapeMargin;
+
   mozilla::StyleShapeSource mShapeOutside; // [reset]
 
   bool IsBlockInsideStyle() const {
     return mozilla::StyleDisplay::Block == mDisplay ||
            mozilla::StyleDisplay::ListItem == mDisplay ||
            mozilla::StyleDisplay::InlineBlock == mDisplay ||
            mozilla::StyleDisplay::TableCaption == mDisplay ||
            mozilla::StyleDisplay::FlowRoot == mDisplay;

--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -6407,21 +6407,32 @@ if (IsCSSPropertyPrefEnabled("svg.transf
   };
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.shape-outside.enabled")) {
   gCSSProperties["shape-image-threshold"] = {
     domProp: "shapeImageThreshold",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
     initial_values: [ "0", "0.0000", "-3", ],
     other_values: [ "0.4", "1", "17", "397.376", "3e1", "3e+1", "3e-1", "3e0", "3e+0", "3e-0" ],
     invalid_values: [ "0px", "1px", "20%", "default", "auto" ]
   };
 
+  gCSSProperties["shape-margin"] = {
+    domProp: "shapeMargin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: [ "0", ],
+    other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)" ],
+    invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%" ],
+  };
+
   gCSSProperties["shape-outside"] = {
     domProp: "shapeOutside",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     initial_values: [ "none" ],
     other_values: [
       "url(#my-shape-outside)",

--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -312,16 +312,20 @@ var supported_properties = {
 
 if (SpecialPowers.getBoolPref("layout.css.shape-outside.enabled")) {
   supported_properties["shape-image-threshold"] =
     [ test_float_zeroToOne_transition,
       // shape-image-threshold (like opacity) is clamped in computed style
       // (not parsing/interpolation)
       test_float_zeroToOne_clamped ];
 
+  supported_properties["shape-margin"] =
+    [ test_length_transition, test_percent_transition,
+      test_length_clamped, test_percent_clamped ];
+
   supported_properties["shape-outside"] =
     [ test_basic_shape_or_url_transition ];
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
   supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
 }