diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index cf770674e74..cf4373fbeb6 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -407,7 +407,7 @@ impl LayoutElementHelpers for LayoutJS<Element> {
         if let Some(color) = bgcolor {
             hints.push(from_declaration(
                 PropertyDeclaration::BackgroundColor(DeclaredValue::Value(
-                    CSSColor { parsed: Color::RGBA(color), authored: None }))));
+                    Box::new(CSSColor { parsed: Color::RGBA(color), authored: None })))));
         }
 
         let background = if let Some(this) = self.downcast::<HTMLBodyElement>() {
@@ -440,10 +440,10 @@ impl LayoutElementHelpers for LayoutJS<Element> {
 
         if let Some(color) = color {
             hints.push(from_declaration(
-                PropertyDeclaration::Color(DeclaredValue::Value(CSSRGBA {
+                PropertyDeclaration::Color(DeclaredValue::Value(Box::new(CSSRGBA {
                     parsed: color,
                     authored: None,
-                }))));
+                })))));
         }
 
         let font_family = if let Some(this) = self.downcast::<HTMLFontElement>() {
@@ -480,10 +480,10 @@ impl LayoutElementHelpers for LayoutJS<Element> {
             let width_value = specified::Length::from_px(cellspacing as f32);
             hints.push(from_declaration(
                 PropertyDeclaration::BorderSpacing(DeclaredValue::Value(
-                    border_spacing::SpecifiedValue {
+                    Box::new(border_spacing::SpecifiedValue {
                         horizontal: width_value.clone(),
                         vertical: width_value,
-                    }))));
+                    })))));
         }
 
 
diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index abec5947041..1219600a5d3 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -96,7 +96,7 @@ class Longhand(object):
                  predefined_type=None, custom_cascade=False, experimental=False, internal=False,
                  need_clone=False, need_index=False, gecko_ffi_name=None, depend_on_viewport_size=False,
                  allowed_in_keyframe_block=True, complex_color=False, cast_type='u8',
-                 has_uncacheable_values=False, logical=False, alias=None, extra_prefixes=None):
+                 has_uncacheable_values=False, logical=False, alias=None, extra_prefixes=None, boxed=False):
         self.name = name
         if not spec:
             raise TypeError("Spec should be specified for %s" % name)
@@ -119,6 +119,7 @@ class Longhand(object):
         self.logical = arg_to_bool(logical)
         self.alias = alias.split() if alias else []
         self.extra_prefixes = extra_prefixes.split() if extra_prefixes else []
+        self.boxed = arg_to_bool(boxed)
 
         # https://drafts.csswg.org/css-animations/#keyframes
         # > The <declaration-list> inside of <keyframe-block> accepts any CSS property
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 00605214b06..70363eba25c 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -168,8 +168,16 @@ impl ComputedValues {
                         PropertyDeclarationBlock {
                             declarations: vec![
                                 (PropertyDeclaration::${prop.camel_case}(DeclaredValue::Value(
+                                    % if prop.boxed:
+                                        Box::new(
+                                    % endif
                                     longhands::${prop.ident}::SpecifiedValue::from_computed_value(
-                                      &self.get_${prop.style_struct.ident.strip("_")}().clone_${prop.ident}()))),
+                                      &self.get_${prop.style_struct.ident.strip("_")}().clone_${prop.ident}())
+                                    % if prop.boxed:
+                                        )
+                                    % endif
+
+                                 )),
                                  Importance::Normal)
                             ],
                             important_count: 0
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index 1c0c441ac63..fa6ccbd862b 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -9,8 +9,13 @@
         ${caller.body()}
         % if not data.longhands_by_name[name].derived_from:
             pub fn parse_specified(context: &ParserContext, input: &mut Parser)
-                               -> Result<DeclaredValue<SpecifiedValue>, ()> {
-                parse(context, input).map(DeclaredValue::Value)
+                % if data.longhands_by_name[name].boxed:
+                                   -> Result<DeclaredValue<Box<SpecifiedValue>>, ()> {
+                    parse(context, input).map(|result| DeclaredValue::Value(Box::new(result)))
+                % else:
+                                   -> Result<DeclaredValue<SpecifiedValue>, ()> {
+                    parse(context, input).map(DeclaredValue::Value)
+                % endif
             }
         % endif
     </%call>
@@ -298,7 +303,11 @@
         }
         % if not property.derived_from:
             pub fn parse_declared(context: &ParserContext, input: &mut Parser)
-                               -> Result<DeclaredValue<SpecifiedValue>, ()> {
+                               % if property.boxed:
+                                   -> Result<DeclaredValue<Box<SpecifiedValue>>, ()> {
+                               % else:
+                                   -> Result<DeclaredValue<SpecifiedValue>, ()> {
+                               % endif
                 match input.try(|i| CSSWideKeyword::parse(context, i)) {
                     Ok(CSSWideKeyword::InheritKeyword) => Ok(DeclaredValue::Inherit),
                     Ok(CSSWideKeyword::InitialKeyword) => Ok(DeclaredValue::Initial),
@@ -429,7 +438,13 @@
         /// correspond to a shorthand.
         pub struct LonghandsToSerialize<'a> {
             % for sub_property in shorthand.sub_properties:
-                pub ${sub_property.ident}: &'a DeclaredValue<longhands::${sub_property.ident}::SpecifiedValue>,
+                % if sub_property.boxed:
+                    pub ${sub_property.ident}:
+                        &'a DeclaredValue<Box<longhands::${sub_property.ident}::SpecifiedValue>>,
+                % else:
+                    pub ${sub_property.ident}:
+                        &'a DeclaredValue<longhands::${sub_property.ident}::SpecifiedValue>,
+                % endif
             % endfor
         }
 
@@ -529,7 +544,11 @@
                 % for sub_property in shorthand.sub_properties:
                     declarations.push((PropertyDeclaration::${sub_property.camel_case}(
                         match value.${sub_property.ident} {
-                            Some(value) => DeclaredValue::Value(value),
+                            % if sub_property.boxed:
+                                Some(value) => DeclaredValue::Value(Box::new(value)),
+                            % else:
+                                Some(value) => DeclaredValue::Value(value),
+                            % endif
                             None => DeclaredValue::Initial,
                         }
                     ), Importance::Normal));
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 4ad97be978a..af0079a7f33 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -278,7 +278,11 @@ impl AnimationValue {
                     AnimationValue::${prop.camel_case}(ref from) => {
                         PropertyDeclaration::${prop.camel_case}(
                             DeclaredValue::Value(
-                                longhands::${prop.ident}::SpecifiedValue::from_computed_value(from)))
+                                % if prop.boxed:
+                                    Box::new(longhands::${prop.ident}::SpecifiedValue::from_computed_value(from))))
+                                % else:
+                                    longhands::${prop.ident}::SpecifiedValue::from_computed_value(from)))
+                                % endif
                     }
                 % endif
             % endfor
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index e5cffa016c2..57c193bedeb 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -9,7 +9,7 @@
 ${helpers.predefined_type("background-color", "CSSColor",
     "::cssparser::Color::RGBA(::cssparser::RGBA { red: 0., green: 0., blue: 0., alpha: 0. }) /* transparent */",
     spec="https://drafts.csswg.org/css-backgrounds/#background-color",
-    animatable=True, complex_color=True)}
+    animatable=True, complex_color=True, boxed=True)}
 
 <%helpers:vector_longhand name="background-image" animatable="False"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-image"
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index 55688015ed8..624e8ac7926 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -20,7 +20,7 @@
                               "::cssparser::Color::CurrentColor",
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
                               spec=maybe_logical_spec(side, "color"),
-                              animatable=True, logical = side[1])}
+                              animatable=True, logical = side[1], boxed=True)}
 % endfor
 
 % for side in ALL_SIDES:
@@ -83,7 +83,7 @@ ${helpers.single_keyword("-moz-float-edge", "content-box margin-box",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge)",
                          animatable=False)}
 
-<%helpers:longhand name="border-image-source" products="gecko" animatable="False"
+<%helpers:longhand name="border-image-source" products="gecko" animatable="False" boxed="True"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-source">
     use std::fmt;
     use style_traits::ToCss;
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index aa30a5551ad..95d23dbf0e4 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -1755,7 +1755,7 @@ ${helpers.single_keyword("transform-style",
                          extra_prefixes="moz webkit",
                          animatable=False)}
 
-<%helpers:longhand name="transform-origin" animatable="True" extra_prefixes="moz webkit"
+<%helpers:longhand name="transform-origin" animatable="True" extra_prefixes="moz webkit" boxed="True"
                    spec="https://drafts.csswg.org/css-transforms/#transform-origin-property">
     use app_units::Au;
     use std::fmt;
@@ -1896,7 +1896,8 @@ ${helpers.predefined_type("-moz-binding", "UrlOrNone", "Either::Second(None_)",
                           products="gecko",
                           animatable="False",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding)",
-                          disable_when_testing="True")}
+                          disable_when_testing="True",
+                          boxed=True)}
 
 ${helpers.single_keyword("-moz-orient",
                           "inline block horizontal vertical",
diff --git a/components/style/properties/longhand/color.mako.rs b/components/style/properties/longhand/color.mako.rs
index 8012defab54..a2d9c8975cd 100644
--- a/components/style/properties/longhand/color.mako.rs
+++ b/components/style/properties/longhand/color.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("Color", inherited=True) %>
 
-<%helpers:raw_longhand name="color" need_clone="True" animatable="True"
+<%helpers:raw_longhand name="color" need_clone="True" animatable="True" boxed="True"
                        spec="https://drafts.csswg.org/css-color/#color">
     use cssparser::Color as CSSParserColor;
     use cssparser::RGBA;
@@ -39,15 +39,15 @@
         RGBA { red: 0., green: 0., blue: 0., alpha: 1. }  /* black */
     }
     pub fn parse_specified(context: &ParserContext, input: &mut Parser)
-                           -> Result<DeclaredValue<SpecifiedValue>, ()> {
+                           -> Result<DeclaredValue<Box<SpecifiedValue>>, ()> {
         let value = try!(CSSColor::parse(context, input));
         let rgba = match value.parsed {
             CSSParserColor::RGBA(rgba) => rgba,
             CSSParserColor::CurrentColor => return Ok(DeclaredValue::Inherit)
         };
-        Ok(DeclaredValue::Value(CSSRGBA {
+        Ok(DeclaredValue::Value(Box::new(CSSRGBA {
             parsed: rgba,
             authored: value.authored,
-        }))
+        })))
     }
 </%helpers:raw_longhand>
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index f55524f5201..f06ea2b51f7 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -147,7 +147,7 @@ ${helpers.single_keyword("column-fill", "auto balance", extra_prefixes="moz",
 ${helpers.predefined_type("column-rule-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           products="gecko", animatable=True, extra_prefixes="moz",
-                          complex_color=True, need_clone=True,
+                          complex_color=True, need_clone=True, boxed=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color")}
 
 // It's not implemented in servo or gecko yet.
diff --git a/components/style/properties/longhand/effects.mako.rs b/components/style/properties/longhand/effects.mako.rs
index 9bc62bc5e7d..b01874e8095 100644
--- a/components/style/properties/longhand/effects.mako.rs
+++ b/components/style/properties/longhand/effects.mako.rs
@@ -77,7 +77,7 @@ ${helpers.predefined_type("opacity",
 </%helpers:vector_longhand>
 
 // FIXME: This prop should be animatable
-<%helpers:longhand name="clip" products="servo" animatable="False"
+<%helpers:longhand name="clip" products="servo" animatable="False" boxed="True"
                    spec="https://drafts.fxtf.org/css-masking/#clip-property">
     use std::fmt;
     use style_traits::ToCss;
diff --git a/components/style/properties/longhand/inherited_table.mako.rs b/components/style/properties/longhand/inherited_table.mako.rs
index 62d23a70b49..21930ed0114 100644
--- a/components/style/properties/longhand/inherited_table.mako.rs
+++ b/components/style/properties/longhand/inherited_table.mako.rs
@@ -19,7 +19,7 @@ ${helpers.single_keyword("caption-side", "top bottom",
                          animatable=False,
                          spec="https://drafts.csswg.org/css-tables/#propdef-caption-side")}
 
-<%helpers:longhand name="border-spacing" animatable="False"
+<%helpers:longhand name="border-spacing" animatable="False" boxed="True"
                    spec="https://drafts.csswg.org/css-tables/#propdef-border-spacing">
     use app_units::Au;
     use std::fmt;
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index 900dec4846c..335ad1f1ca1 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -429,7 +429,7 @@ ${helpers.single_keyword("text-align-last",
 <%helpers:longhand name="-servo-text-decorations-in-effect"
                    derived_from="display text-decoration"
                    need_clone="True" products="servo"
-                   animatable="False"
+                   animatable="False" boxed="True"
                    spec="Nonstandard (Internal property used by Servo)">
     use cssparser::RGBA;
     use std::fmt;
@@ -1027,6 +1027,7 @@ ${helpers.predefined_type("text-emphasis-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           products="gecko",animatable=True,
                           complex_color=True, need_clone=True,
+                          boxed=True,
                           spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color")}
 
 // CSS Compatibility
@@ -1035,14 +1036,14 @@ ${helpers.predefined_type(
     "-webkit-text-fill-color", "CSSColor",
     "CSSParserColor::CurrentColor",
     products="gecko", animatable=True,
-    complex_color=True, need_clone=True,
+    complex_color=True, need_clone=True, boxed=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color")}
 
 ${helpers.predefined_type(
     "-webkit-text-stroke-color", "CSSColor",
     "CSSParserColor::CurrentColor",
     products="gecko", animatable=True,
-    complex_color=True, need_clone=True,
+    complex_color=True, need_clone=True, boxed=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color")}
 
 <%helpers:longhand products="gecko" name="-webkit-text-stroke-width" animatable="False"
diff --git a/components/style/properties/longhand/list.mako.rs b/components/style/properties/longhand/list.mako.rs
index b0cfc32f56c..f4f84f9e884 100644
--- a/components/style/properties/longhand/list.mako.rs
+++ b/components/style/properties/longhand/list.mako.rs
@@ -29,7 +29,7 @@ ${helpers.single_keyword("list-style-type", """
     spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type")}
 
 ${helpers.predefined_type("list-style-image", "UrlOrNone", "Either::Second(None_)",
-                          animatable="False",
+                          animatable=False,
                           spec="https://drafts.csswg.org/css-lists/#propdef-list-style-image")}
 
 <%helpers:longhand name="quotes" animatable="False"
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index 9780ac24110..b47f45d7a68 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -11,7 +11,7 @@
 
 // TODO(pcwalton): `invert`
 ${helpers.predefined_type("outline-color", "CSSColor", "::cssparser::Color::CurrentColor",
-                          animatable=True, complex_color=True, need_clone=True,
+                          animatable=True, complex_color=True, need_clone=True, boxed=True,
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-color")}
 
 <%helpers:longhand name="outline-style" need_clone="True" animatable="False"
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 73b11432aaa..3e55cb2bd3b 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -218,5 +218,6 @@ ${helpers.single_keyword("object-fit", "fill contain cover none scale-down",
                               "Default::default()",
                               animatable=False,
                               spec="https://drafts.csswg.org/css-grid/#propdef-%s" % longhand,
-                              products="gecko")}
+                              products="gecko",
+                              boxed=True)}
 % endfor
diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index 9e68d5386af..f4ea79eb5ae 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -25,6 +25,7 @@ ${helpers.predefined_type(
     "CSSParserColor::RGBA(RGBA { red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0 })",
     products="gecko",
     animatable=False,
+    boxed=True,
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty")}
 
 ${helpers.predefined_type("stop-opacity", "Opacity", "1.0",
@@ -39,6 +40,7 @@ ${helpers.predefined_type(
     "CSSParserColor::RGBA(RGBA { red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0 })",
     products="gecko",
     animatable=False,
+    boxed=True,
     spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty")}
 
 ${helpers.predefined_type("flood-opacity", "Opacity",
@@ -50,6 +52,7 @@ ${helpers.predefined_type(
     "CSSParserColor::RGBA(RGBA { red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0 })",
     products="gecko",
     animatable=False,
+    boxed=True,
     spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty")}
 
 // CSS Masking Module Level 1
@@ -58,7 +61,7 @@ ${helpers.single_keyword("mask-type", "luminance alpha",
                          products="gecko", animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-type")}
 
-<%helpers:longhand name="clip-path" animatable="False" products="gecko"
+<%helpers:longhand name="clip-path" animatable="False" products="gecko" boxed="True"
                    spec="https://drafts.fxtf.org/css-masking/#propdef-clip-path">
     use std::fmt;
     use style_traits::ToCss;
diff --git a/components/style/properties/longhand/text.mako.rs b/components/style/properties/longhand/text.mako.rs
index 8d1792c046b..2ea249924d5 100644
--- a/components/style/properties/longhand/text.mako.rs
+++ b/components/style/properties/longhand/text.mako.rs
@@ -12,7 +12,7 @@
                                              Method("has_overline", "bool"),
                                              Method("has_line_through", "bool")]) %>
 
-<%helpers:longhand name="text-overflow" animatable="False"
+<%helpers:longhand name="text-overflow" animatable="False" boxed="True"
                    spec="https://drafts.csswg.org/css-ui/#propdef-text-overflow">
     use std::fmt;
     use style_traits::ToCss;
@@ -214,4 +214,5 @@ ${helpers.predefined_type(
     complex_color=True,
     products="gecko",
     animatable=True,
+    boxed=True,
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color")}
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 2db64837374..d8b7586a799 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -246,11 +246,19 @@ mod property_bit_field {
         /// the resulting declared value.
         #[allow(non_snake_case)]
         fn substitute_variables_${property.ident}<F>(
-            value: &DeclaredValue<longhands::${property.ident}::SpecifiedValue>,
+            % if property.boxed:
+                value: &DeclaredValue<Box<longhands::${property.ident}::SpecifiedValue>>,
+            % else:
+                value: &DeclaredValue<longhands::${property.ident}::SpecifiedValue>,
+            % endif
             custom_properties: &Option<Arc<::custom_properties::ComputedValuesMap>>,
             f: F,
             error_reporter: &mut StdBox<ParseErrorReporter + Send>)
-            where F: FnOnce(&DeclaredValue<longhands::${property.ident}::SpecifiedValue>)
+            % if property.boxed:
+                where F: FnOnce(&DeclaredValue<Box<longhands::${property.ident}::SpecifiedValue>>)
+            % else:
+                where F: FnOnce(&DeclaredValue<longhands::${property.ident}::SpecifiedValue>)
+            % endif
         {
             if let DeclaredValue::WithVariables {
                 ref css, first_token_type, ref base_url, from_shorthand
@@ -283,7 +291,11 @@ mod property_bit_field {
                 f: F,
                 error_reporter: &mut StdBox<ParseErrorReporter + Send>,
                 extra_data: ParserContextExtraData)
-                where F: FnOnce(&DeclaredValue<longhands::${property.ident}::SpecifiedValue>)
+                % if property.boxed:
+                    where F: FnOnce(&DeclaredValue<Box<longhands::${property.ident}::SpecifiedValue>>)
+                % else:
+                    where F: FnOnce(&DeclaredValue<longhands::${property.ident}::SpecifiedValue>)
+                % endif
         {
             f(&
                 ::custom_properties::substitute(css, first_token_type, custom_properties)
@@ -305,7 +317,11 @@ mod property_bit_field {
                                     Some(ShorthandId::${shorthand.camel_case}) => {
                                         shorthands::${shorthand.ident}::parse_value(&context, input)
                                         .map(|result| match result.${property.ident} {
-                                            Some(value) => DeclaredValue::Value(value),
+                                            % if property.boxed:
+                                                Some(value) => DeclaredValue::Value(Box::new(value)),
+                                            % else:
+                                                Some(value) => DeclaredValue::Value(value),
+                                            % endif
                                             None => DeclaredValue::Initial,
                                         })
                                     }
@@ -826,7 +842,11 @@ impl PropertyId {
 pub enum PropertyDeclaration {
     % for property in data.longhands:
         /// ${property.name}
-        ${property.camel_case}(DeclaredValue<longhands::${property.ident}::SpecifiedValue>),
+        % if property.boxed:
+            ${property.camel_case}(DeclaredValue<Box<longhands::${property.ident}::SpecifiedValue>>),
+        % else:
+            ${property.camel_case}(DeclaredValue<longhands::${property.ident}::SpecifiedValue>),
+        % endif
     % endfor
     /// A custom property declaration, with the property name and the declared
     /// value.
@@ -2300,3 +2320,18 @@ macro_rules! longhand_properties_idents {
         }
     }
 }
+
+/// Retuns all longhands SpecifiedValue sizes. This is used in unit tests.
+#[cfg(feature = "testing")]
+pub fn specified_value_sizes() -> Vec<(&'static str, usize, bool)> {
+    use std::mem::size_of;
+    let mut sizes = vec![];
+
+    % for property in data.longhands:
+        sizes.push(("${property.name}",
+                    size_of::<longhands::${property.ident}::SpecifiedValue>(),
+                    ${"true" if property.boxed else "false"}));
+    % endfor
+
+    sizes
+}
diff --git a/components/style/properties/shorthand/serialize.mako.rs b/components/style/properties/shorthand/serialize.mako.rs
index e8b7a76b0cf..a9913165e2c 100644
--- a/components/style/properties/shorthand/serialize.mako.rs
+++ b/components/style/properties/shorthand/serialize.mako.rs
@@ -58,10 +58,10 @@ pub fn serialize_four_sides<W, I>(dest: &mut W,
     Ok(())
 }
 
-fn serialize_directional_border<W, I>(dest: &mut W,
+fn serialize_directional_border<W, I,>(dest: &mut W,
                                                 width: &DeclaredValue<I>,
                                                 style: &DeclaredValue<BorderStyle>,
-                                                color: &DeclaredValue<CSSColor>)
+                                                color: &DeclaredValue<Box<CSSColor>>)
                                                 -> fmt::Result where W: fmt::Write, I: ToCss {
     match *width {
         DeclaredValue::Value(ref width) => {
diff --git a/components/style/values/mod.rs b/components/style/values/mod.rs
index 4665b37ad82..a1885f7552e 100644
--- a/components/style/values/mod.rs
+++ b/components/style/values/mod.rs
@@ -75,7 +75,12 @@ pub trait HasViewportPercentage {
     fn has_viewport_percentage(&self) -> bool;
 }
 
-
+impl<T: HasViewportPercentage> HasViewportPercentage for Box<T> {
+    #[inline]
+    fn has_viewport_percentage(&self) -> bool {
+        (**self).has_viewport_percentage()
+    }
+}
 
 use self::computed::ComputedValueAsSpecified;
 
diff --git a/components/style_traits/values.rs b/components/style_traits/values.rs
index d59520c626d..ab730508bce 100644
--- a/components/style_traits/values.rs
+++ b/components/style_traits/values.rs
@@ -39,6 +39,14 @@ impl<T> ToCss for Vec<T> where T: ToCss + OneOrMoreCommaSeparated {
     }
 }
 
+impl<T: ToCss> ToCss for Box<T> {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+        where W: fmt::Write,
+    {
+        (**self).to_css(dest)
+    }
+}
+
 impl ToCss for Au {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
         write!(dest, "{}px", self.to_f64_px())
diff --git a/ports/geckolib/glue.rs b/ports/geckolib/glue.rs
index 6ba9b8148de..ce1e1d123ca 100644
--- a/ports/geckolib/glue.rs
+++ b/ports/geckolib/glue.rs
@@ -1007,12 +1007,12 @@ pub extern "C" fn Servo_DeclarationBlock_AddPresValue(declarations: RawServoDecl
         }
         LonghandId::Color => {
             if let Some(color) = css_value.color_value() {
-                PropertyDeclaration::Color(DeclaredValue::Value(
+                PropertyDeclaration::Color(DeclaredValue::Value(Box::new(
                     specified::CSSRGBA {
                         parsed: convert_nscolor_to_rgba(color),
                         authored: None
                     }
-                ))
+                )))
             } else {
                 error!("stylo: got unexpected non-integer value for color presentation attribute");
                 return
diff --git a/tests/unit/style/properties/serialization.rs b/tests/unit/style/properties/serialization.rs
index 0952fc970db..da2574a575d 100644
--- a/tests/unit/style/properties/serialization.rs
+++ b/tests/unit/style/properties/serialization.rs
@@ -231,15 +231,15 @@ mod shorthand_serialization {
         fn border_color_should_serialize_correctly() {
             let mut properties = Vec::new();
 
-            let red = DeclaredValue::Value(CSSColor {
+            let red = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
-            let blue = DeclaredValue::Value(CSSColor {
+            let blue = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 0f32, green: 0f32, blue: 1f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             properties.push(PropertyDeclaration::BorderTopColor(blue.clone()));
             properties.push(PropertyDeclaration::BorderRightColor(red.clone()));
@@ -281,10 +281,10 @@ mod shorthand_serialization {
 
             let width = DeclaredValue::Value(BorderWidth::from_length(Length::from_px(4f32)));
             let style = DeclaredValue::Value(BorderStyle::solid);
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             properties.push(PropertyDeclaration::BorderTopWidth(width));
             properties.push(PropertyDeclaration::BorderTopStyle(style));
@@ -300,10 +300,10 @@ mod shorthand_serialization {
 
             let width = DeclaredValue::Value(BorderWidth::from_length(Length::from_px(4f32)));
             let style = DeclaredValue::Initial;
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             properties.push(PropertyDeclaration::BorderTopWidth(width));
             properties.push(PropertyDeclaration::BorderTopStyle(style));
@@ -469,10 +469,10 @@ mod shorthand_serialization {
 
             let width = DeclaredValue::Value(WidthContainer(Length::from_px(4f32)));
             let style = DeclaredValue::Value(Either::Second(BorderStyle::solid));
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             properties.push(PropertyDeclaration::OutlineWidth(width));
             properties.push(PropertyDeclaration::OutlineStyle(style));
@@ -504,10 +504,10 @@ mod shorthand_serialization {
 
             let width = DeclaredValue::Value(WidthContainer(Length::from_px(4f32)));
             let style = DeclaredValue::Initial;
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
             properties.push(PropertyDeclaration::OutlineWidth(width));
             properties.push(PropertyDeclaration::OutlineStyle(style));
             properties.push(PropertyDeclaration::OutlineColor(color));
@@ -522,10 +522,10 @@ mod shorthand_serialization {
 
             let width = DeclaredValue::Value(WidthContainer(Length::from_px(4f32)));
             let style = DeclaredValue::Value(Either::First(Auto));
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
             properties.push(PropertyDeclaration::OutlineWidth(width));
             properties.push(PropertyDeclaration::OutlineStyle(style));
             properties.push(PropertyDeclaration::OutlineColor(color));
@@ -730,10 +730,10 @@ mod shorthand_serialization {
         fn background_should_serialize_all_available_properties_when_specified() {
             let mut properties = Vec::new();
 
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             let position_x = single_vec_value_typedef!(position_x,
                 HorizontalPosition {
@@ -790,10 +790,10 @@ mod shorthand_serialization {
         fn background_should_combine_origin_and_clip_properties_when_equal() {
             let mut properties = Vec::new();
 
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             let position_x = single_vec_value_typedef!(position_x,
                 HorizontalPosition {
@@ -849,10 +849,10 @@ mod shorthand_serialization {
         fn background_should_always_print_color_and_url_and_repeat_and_attachment_and_position() {
             let mut properties = Vec::new();
 
-            let color = DeclaredValue::Value(CSSColor {
+            let color = DeclaredValue::Value(Box::new(CSSColor {
                 parsed: ComputedColor::RGBA(RGBA { red: 1f32, green: 0f32, blue: 0f32, alpha: 1f32 }),
                 authored: None
-            });
+            }));
 
             let position_x = single_vec_value_typedef!(position_x,
                 HorizontalPosition {
diff --git a/tests/unit/style/size_of.rs b/tests/unit/style/size_of.rs
index 5da4463db30..00005485175 100644
--- a/tests/unit/style/size_of.rs
+++ b/tests/unit/style/size_of.rs
@@ -3,11 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 use std::mem::size_of;
-use style::properties::PropertyDeclaration;
+use style::properties::{PropertyDeclaration, specified_value_sizes};
 
 #[test]
 fn size_of_property_declaration() {
-    let old = 240;
+    let old = 96;
     let new = size_of::<PropertyDeclaration>();
     if new < old {
         panic!("Your changes have decreased the stack size of PropertyDeclaration enum from {} to {}. \
@@ -22,3 +22,23 @@ fn size_of_property_declaration() {
                 old, new)
     }
 }
+
+#[test]
+fn size_of_specified_values() {
+    let threshold = 40;
+    let longhands = specified_value_sizes();
+
+    for specified_value in longhands {
+        if specified_value.1 >= threshold && !specified_value.2 {
+            panic!("Your changes have increased the size of {} SpecifiedValue to {}. The threshold is \
+                    currently {}. SpecifiedValues are affect size of PropertyDeclaration enum and \
+                    increasing the size may dramatically affect our memory footprint. Please consider \
+                    using `boxed=\"True\"` in this longhand.",
+                    specified_value.0, specified_value.1, threshold)
+        } else if specified_value.1 < threshold && specified_value.2 {
+            panic!("Your changes have decreased the size of {} SpecifiedValue to {}. Good work! \
+                    The threshold is currently {}. Please consider removing `boxed=\"True\"` from this longhand.",
+                    specified_value.0, specified_value.1, threshold)
+        }
+    }
+}
diff --git a/tests/unit/style/stylesheets.rs b/tests/unit/style/stylesheets.rs
index 40ad06d8e4f..f2ff5d0163b 100644
--- a/tests/unit/style/stylesheets.rs
+++ b/tests/unit/style/stylesheets.rs
@@ -183,12 +183,12 @@ fn test_parse_stylesheet() {
                 block: Arc::new(RwLock::new(PropertyDeclarationBlock {
                     declarations: vec![
                         (PropertyDeclaration::BackgroundColor(DeclaredValue::Value(
-                            longhands::background_color::SpecifiedValue {
+                            Box::new(longhands::background_color::SpecifiedValue {
                                 authored: Some("blue".to_owned()),
                                 parsed: cssparser::Color::RGBA(cssparser::RGBA {
                                     red: 0., green: 0., blue: 1., alpha: 1.
                                 }),
-                            }
+                            })
                          )),
                          Importance::Normal),
                         (PropertyDeclaration::BackgroundPositionX(DeclaredValue::Value(