--- a/devtools/server/actors/animation-type-longhand.js
+++ b/devtools/server/actors/animation-type-longhand.js
@@ -128,16 +128,17 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
     "scroll-snap-coordinate",
     "scroll-snap-destination",
     "scroll-snap-points-x",
     "scroll-snap-points-y",
     "scroll-snap-type-x",
     "scroll-snap-type-y",
     "shape-rendering",
     "-moz-stack-sizing",
+    "scrollbar-width",
     "stroke-linecap",
     "stroke-linejoin",
     "table-layout",
     "text-align",
     "text-align-last",
     "text-anchor",
     "text-combine-upright",
     "text-decoration-line",

--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -3135,16 +3135,17 @@ exports.CSS_PROPERTIES = {
       "row-gap",
       "table-layout",
       "text-overflow",
       "text-decoration-line",
       "text-decoration-style",
       "text-decoration-color",
       "initial-letter",
       "ime-mode",
+      "scrollbar-width",
       "-moz-user-select",
       "-moz-window-dragging",
       "-moz-force-broken-image-icon",
       "dominant-baseline",
       "vector-effect",
       "stop-color",
       "stop-opacity",
       "flood-color",
@@ -9274,16 +9275,20 @@ exports.PREFERENCES = [
     "-moz-osx-font-smoothing",
     "layout.css.osx-font-smoothing.enabled"
   ],
   [
     "scroll-behavior",
     "layout.css.scroll-behavior.property-enabled"
   ],
   [
+    "scrollbar-width",
+    "layout.css.scrollbar-width.enabled"
+  ],
+  [
     "text-justify",
     "layout.css.text-justify.enabled"
   ],
   [
     "touch-action",
     "layout.css.touch_action.enabled"
   ],
   [

--- a/layout/style/ServoBindings.toml
+++ b/layout/style/ServoBindings.toml
@@ -176,16 +176,17 @@ rusty-enums = [
     "mozilla::StyleUserFocus",
     "mozilla::StyleUserSelect",
     "mozilla::StyleImageLayerRepeat",
     "mozilla::StyleImageLayerAttachment",
     "mozilla::StyleBoxDecorationBreak",
     "mozilla::StyleRuleInclusion",
     "mozilla::StyleGridTrackBreadth",
     "mozilla::StyleOverscrollBehavior",
+    "mozilla::StyleScrollbarWidth",
     "mozilla::StyleWhiteSpace",
     "nsStyleImageType",
     "nsStyleSVGPaintType",
     "nsStyleSVGFallbackType",
     "nsINode_BooleanFlag",
     "mozilla::CSSPseudoElementType",
     "mozilla::LookAndFeel_ColorID",
     "mozilla::LookAndFeel_FontID",

--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -173,16 +173,23 @@ enum class StyleHyphens : uint8_t {
 };
 
 // image-orientation
 enum class StyleImageOrientation : uint8_t {
   None,
   FromImage,
 };
 
+// scrollbar-width
+enum class StyleScrollbarWidth : uint8_t {
+  Auto,
+  Thin,
+  None,
+};
+
 // <shape-radius> for <basic-shape>
 enum class StyleShapeRadius : uint8_t {
   ClosestSide,
   FarthestSide,
 };
 
 // Shape source type
 enum class StyleShapeSourceType : uint8_t {

--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -4706,30 +4706,32 @@ nsStyleUI::CalcDifference(const nsStyleU
 }
 
 //-----------------------
 // nsStyleUIReset
 //
 
 nsStyleUIReset::nsStyleUIReset(const nsPresContext* aContext)
   : mUserSelect(StyleUserSelect::Auto)
+  , mScrollbarWidth(StyleScrollbarWidth::Auto)
   , mForceBrokenImageIcon(0)
   , mIMEMode(NS_STYLE_IME_MODE_AUTO)
   , mWindowDragging(StyleWindowDragging::Default)
   , mWindowShadow(NS_STYLE_WINDOW_SHADOW_DEFAULT)
   , mWindowOpacity(1.0)
   , mSpecifiedWindowTransform(nullptr)
   , mWindowTransformOrigin{ {0.5f, eStyleUnit_Percent}, // Transform is centered on origin
                             {0.5f, eStyleUnit_Percent} }
 {
   MOZ_COUNT_CTOR(nsStyleUIReset);
 }
 
 nsStyleUIReset::nsStyleUIReset(const nsStyleUIReset& aSource)
   : mUserSelect(aSource.mUserSelect)
+  , mScrollbarWidth(aSource.mScrollbarWidth)
   , mForceBrokenImageIcon(aSource.mForceBrokenImageIcon)
   , mIMEMode(aSource.mIMEMode)
   , mWindowDragging(aSource.mWindowDragging)
   , mWindowShadow(aSource.mWindowShadow)
   , mWindowOpacity(aSource.mWindowOpacity)
   , mSpecifiedWindowTransform(aSource.mSpecifiedWindowTransform)
   , mWindowTransformOrigin{ aSource.mWindowTransformOrigin[0],
                             aSource.mWindowTransformOrigin[1] }
@@ -4748,16 +4750,22 @@ nsStyleUIReset::~nsStyleUIReset()
 nsChangeHint
 nsStyleUIReset::CalcDifference(const nsStyleUIReset& aNewData) const
 {
   nsChangeHint hint = nsChangeHint(0);
 
   if (mForceBrokenImageIcon != aNewData.mForceBrokenImageIcon) {
     hint |= nsChangeHint_ReconstructFrame;
   }
+  if (mScrollbarWidth != aNewData.mScrollbarWidth) {
+    // For scrollbar-width change, we need some special handling similar
+    // to overflow properties. Specifically, we may need to reconstruct
+    // the scrollbar or force reflow of the viewport scrollbar.
+    hint |= nsChangeHint_ScrollbarChange;
+  }
   if (mWindowShadow != aNewData.mWindowShadow) {
     // We really need just an nsChangeHint_SyncFrameView, except
     // on an ancestor of the frame, so we get that by doing a
     // reflow.
     hint |= NS_STYLE_HINT_REFLOW;
   }
   if (mUserSelect != aNewData.mUserSelect) {
     hint |= NS_STYLE_HINT_VISUAL;

--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -2740,16 +2740,17 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
   nsStyleUIReset(const nsStyleUIReset& aOther);
   ~nsStyleUIReset();
   void FinishStyle(nsPresContext*, const nsStyleUIReset*) {}
   const static bool kHasFinishStyle = false;
 
   nsChangeHint CalcDifference(const nsStyleUIReset& aNewData) const;
 
   mozilla::StyleUserSelect     mUserSelect;     // [reset](selection-style)
+  mozilla::StyleScrollbarWidth mScrollbarWidth;
   uint8_t mForceBrokenImageIcon; // (0 if not forcing, otherwise forcing)
   uint8_t                      mIMEMode;
   mozilla::StyleWindowDragging mWindowDragging;
   uint8_t                      mWindowShadow;
   float                        mWindowOpacity;
   RefPtr<nsCSSValueSharedList> mSpecifiedWindowTransform;
   nsStyleCoord                 mWindowTransformOrigin[2]; // percent, coord, calc
 };

--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -8157,16 +8157,27 @@ if (IsCSSPropertyPrefEnabled("layout.css
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "auto" ],
     other_values: [ "red", "blue", "#ffff00" ],
     invalid_values: [ "ffff00" ]
   };
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-width.enabled")) {
+  gCSSProperties["scrollbar-width"] = {
+    domProp: "scrollbarWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "auto" ],
+    other_values: [ "none", "thin" ],
+    invalid_values: [ "1px" ]
+  };
+}
+
 const OVERFLOW_MOZKWS = [
   "-moz-scrollbars-none",
   "-moz-scrollbars-horizontal",
   "-moz-scrollbars-vertical",
 ];
 if (IsCSSPropertyPrefEnabled("layout.css.overflow.moz-scrollbars.enabled")) {
   gCSSProperties["overflow"].other_values.push(...OVERFLOW_MOZKWS);
 } else {

--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2930,16 +2930,19 @@ pref("layout.css.mix-blend-mode.enabled"
 pref("layout.css.isolation.enabled", true);
 
 // Is support for CSS Filters enabled?
 pref("layout.css.filters.enabled", true);
 
 // Is support for CSS Scrollbar color properties enabled?
 pref("layout.css.scrollbar-colors.enabled", false);
 
+// Is support for scrollbar-width property enabled?
+pref("layout.css.scrollbar-width.enabled", false);
+
 // Set the threshold distance in CSS pixels below which scrolling will snap to
 // an edge, when scroll snapping is set to "proximity".
 pref("layout.css.scroll-snap.proximity-threshold", 200);
 
 // When selecting the snap point for CSS scroll snapping, the velocity of the
 // scroll frame is clamped to this speed, in CSS pixels / s.
 pref("layout.css.scroll-snap.prediction-max-velocity", 2000);
 

--- a/servo/components/style/properties/longhands/ui.mako.rs
+++ b/servo/components/style/properties/longhands/ui.mako.rs
@@ -11,16 +11,27 @@
 
 // TODO spec says that UAs should not support this
 // we should probably remove from gecko (https://bugzilla.mozilla.org/show_bug.cgi?id=1328331)
 ${helpers.single_keyword("ime-mode", "auto normal active disabled inactive",
                          products="gecko", gecko_ffi_name="mIMEMode",
                          animation_value_type="discrete",
                          spec="https://drafts.csswg.org/css-ui/#input-method-editor")}
 
+${helpers.single_keyword(
+    "scrollbar-width",
+    "auto thin none",
+    products="gecko",
+    gecko_enum_prefix="StyleScrollbarWidth",
+    animation_value_type="discrete",
+    gecko_pref="layout.css.scrollbar-width.enabled",
+    enabled_in="chrome",
+    spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"
+)}
+
 ${helpers.single_keyword("-moz-user-select", "auto text none all element elements" +
                             " toggle tri-state -moz-all -moz-text",
                          products="gecko",
                          alias="-webkit-user-select",
                          gecko_ffi_name="mUserSelect",
                          gecko_enum_prefix="StyleUserSelect",
                          gecko_strip_moz_prefix=False,
                          aliases="-moz-none=none",