diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 1de99ec16f1..2275316bf72 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -5304,7 +5304,7 @@ clip-path
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="InheritedUI"
-                  skip_longhands="cursor">
+                  skip_longhands="cursor scrollbar-color">
     pub fn set_cursor(&mut self, v: longhands::cursor::computed_value::T) {
         use style_traits::cursor::CursorKind;
 
@@ -5450,6 +5450,48 @@ clip-path
 
         longhands::cursor::computed_value::T { images, keyword }
     }
+
+    pub fn set_scrollbar_color(&mut self, v: longhands::scrollbar_color::computed_value::T) {
+        use gecko_bindings::structs::StyleComplexColor;
+        use values::generics::ui::ScrollbarColor;
+        match v {
+            ScrollbarColor::Auto => {
+                self.gecko.mScrollbarFaceColor = StyleComplexColor::auto();
+                self.gecko.mScrollbarTrackColor = StyleComplexColor::auto();
+            }
+            ScrollbarColor::Colors { thumb, track } => {
+                self.gecko.mScrollbarFaceColor = thumb.into();
+                self.gecko.mScrollbarTrackColor = track.into();
+            }
+        }
+    }
+
+    pub fn copy_scrollbar_color_from(&mut self, other: &Self) {
+        self.gecko.mScrollbarFaceColor = other.gecko.mScrollbarFaceColor;
+        self.gecko.mScrollbarTrackColor = other.gecko.mScrollbarTrackColor;
+    }
+
+    pub fn reset_scrollbar_color(&mut self, other: &Self) {
+        self.copy_scrollbar_color_from(other);
+    }
+
+    pub fn clone_scrollbar_color(&self) -> longhands::scrollbar_color::computed_value::T {
+        use gecko_bindings::structs::StyleComplexColor_Tag as Tag;
+        use values::generics::ui::ScrollbarColor;
+        debug_assert!(
+            (self.gecko.mScrollbarFaceColor.mTag == Tag::eAuto) ==
+            (self.gecko.mScrollbarTrackColor.mTag == Tag::eAuto),
+            "Whether the two colors are `auto` should match",
+        );
+        if self.gecko.mScrollbarFaceColor.mTag == Tag::eAuto {
+            ScrollbarColor::Auto
+        } else {
+            ScrollbarColor::Colors {
+                thumb: self.gecko.mScrollbarFaceColor.into(),
+                track: self.gecko.mScrollbarTrackColor.into(),
+            }
+        }
+    }
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="Column"
diff --git a/components/style/properties/longhands/inherited_ui.mako.rs b/components/style/properties/longhands/inherited_ui.mako.rs
index 0b2b590cf7f..6bdd0ff51b5 100644
--- a/components/style/properties/longhands/inherited_ui.mako.rs
+++ b/components/style/properties/longhands/inherited_ui.mako.rs
@@ -67,24 +67,15 @@ ${helpers.predefined_type(
     products="gecko",
 )}
 
-// Only scrollbar-face-color and scrollbar-track-color are added here.
-// These two are the only common parts of scrollbar among Windows and
-// macOS. We may or may not want to provide other properties to allow
-// finer-grain control.
-//
-// NOTE The syntax in spec is currently `normal | <color>`, but I think
-//      reusing `auto | <color>` as `caret-color` makes more sense. See
-//      https://github.com/w3c/csswg-drafts/issues/2660
-% for part in ["face", "track"]:
 ${helpers.predefined_type(
-    "scrollbar-%s-color" % part,
-    "ColorOrAuto",
-    "Either::Second(Auto)",
-    spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties",
+    "scrollbar-color",
+    "ui::ScrollbarColor",
+    "Default::default()",
+    spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color",
     gecko_pref="layout.css.scrollbar-colors.enabled",
-    animation_value_type="ColorOrAuto",
+    animation_value_type="ScrollbarColor",
+    boxed=True,
     ignored_when_colors_disabled=True,
     enabled_in="chrome",
     products="gecko",
 )}
-% endfor
diff --git a/components/style/values/computed/ui.rs b/components/style/values/computed/ui.rs
index 5307f79a38e..40f1a378cc9 100644
--- a/components/style/values/computed/ui.rs
+++ b/components/style/values/computed/ui.rs
@@ -20,3 +20,6 @@ pub type Cursor = generics::Cursor<CursorImage>;
 
 /// A computed value for item of `image cursors`.
 pub type CursorImage = generics::CursorImage<ComputedImageUrl, Number>;
+
+/// A computed value for `scrollbar-color` property.
+pub type ScrollbarColor = generics::ScrollbarColor<Color>;
diff --git a/components/style/values/generics/ui.rs b/components/style/values/generics/ui.rs
index bef1926bc90..73f050bb12a 100644
--- a/components/style/values/generics/ui.rs
+++ b/components/style/values/generics/ui.rs
@@ -67,3 +67,27 @@ impl<ImageUrl: ToCss, Number: ToCss> ToCss for CursorImage<ImageUrl, Number> {
         Ok(())
     }
 }
+
+/// A generic value for `scrollbar-color` property.
+///
+/// https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color
+#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug, MallocSizeOf, PartialEq,
+         SpecifiedValueInfo, ToAnimatedValue, ToAnimatedZero, ToComputedValue, ToCss)]
+pub enum ScrollbarColor<Color> {
+    /// `auto`
+    Auto,
+    /// `<color>{2}`
+    Colors {
+        /// First `<color>`, for color of the scrollbar thumb.
+        thumb: Color,
+        /// Second `<color>`, for color of the scrollbar track.
+        track: Color,
+    }
+}
+
+impl<Color> Default for ScrollbarColor<Color> {
+    #[inline]
+    fn default() -> Self {
+        ScrollbarColor::Auto
+    }
+}
diff --git a/components/style/values/specified/ui.rs b/components/style/values/specified/ui.rs
index 7dc1e0fe1d3..c9c5c0a8414 100644
--- a/components/style/values/specified/ui.rs
+++ b/components/style/values/specified/ui.rs
@@ -122,3 +122,21 @@ impl From<MozForceBrokenImageIcon> for u8 {
         }
     }
 }
+
+/// A specified value for `scrollbar-color` property
+pub type ScrollbarColor = generics::ScrollbarColor<Color>;
+
+impl Parse for ScrollbarColor {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        if input.try(|i| i.expect_ident_matching("auto")).is_ok() {
+            return Ok(generics::ScrollbarColor::Auto);
+        }
+        Ok(generics::ScrollbarColor::Colors {
+            thumb: Color::parse(context, input)?,
+            track: Color::parse(context, input)?,
+        })
+    }
+}