diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index 2aa93bbb7d3..017996f87b5 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -619,9 +619,14 @@
     % endif
 </%def>
 
-<%def name="shorthand(name, sub_properties, derive_serialize=False, **kwargs)">
+<%def name="shorthand(name, sub_properties, derive_serialize=False,
+                      derive_value_info=True, **kwargs)">
 <%
     shorthand = data.declare_shorthand(name, sub_properties.split(), **kwargs)
+    # mako doesn't accept non-string value in parameters with <% %> form, so
+    # we have to workaround it this way.
+    if not isinstance(derive_value_info, bool):
+        derive_value_info = eval(derive_value_info)
 %>
     % if shorthand:
     /// ${shorthand.spec}
@@ -636,8 +641,11 @@
         #[allow(unused_imports)]
         use style_traits::{ParseError, StyleParseErrorKind};
         #[allow(unused_imports)]
-        use style_traits::{CssWriter, SpecifiedValueInfo, ToCss};
+        use style_traits::{CssWriter, KeywordsCollectFn, SpecifiedValueInfo, ToCss};
 
+        % if derive_value_info:
+        #[derive(SpecifiedValueInfo)]
+        % endif
         pub struct Longhands {
             % for sub_property in shorthand.sub_properties:
                 pub ${sub_property.ident}:
@@ -744,26 +752,6 @@
             })
         }
 
-        <%
-            sub_properties_for_value_info = shorthand.sub_properties
-            if shorthand.name == "border":
-                # border-image subproperties are simply reset by border
-                # shorthand, so border cannot accept values of them.
-                # XXX We may want a better mechanism for this, but this
-                # is probably fine for now.
-                sub_properties_for_value_info = [
-                    subprop for subprop in shorthand.sub_properties
-                    if not subprop.name.startswith("border-image")
-                ]
-        %>
-        impl SpecifiedValueInfo for Longhands {
-            const SUPPORTED_TYPES: u8 = 0
-                % for subprop in sub_properties_for_value_info:
-                | <longhands::${subprop.ident}::SpecifiedValue as SpecifiedValueInfo>::SUPPORTED_TYPES
-                % endfor
-                ;
-        }
-
         ${caller.body()}
     }
     % endif
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index 2a675a2c523..056096353bc 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -140,6 +140,7 @@ pub fn parse_border<'i, 't>(
         for prop in ['color', 'style', 'width'])}
         ${' '.join('border-image-%s' % name
         for name in ['outset', 'repeat', 'slice', 'source', 'width'])}"
+    derive_value_info="False"
     spec="https://drafts.csswg.org/css-backgrounds/#border">
 
     pub fn parse_value<'i, 't>(
@@ -202,6 +203,17 @@ pub fn parse_border<'i, 't>(
         }
     }
 
+    // Just use the same as border-left. The border shorthand can't accept
+    // any value that the sub-shorthand couldn't.
+    <%
+        border_left = "<::properties::shorthands::border_left::Longhands as SpecifiedValueInfo>"
+    %>
+    impl SpecifiedValueInfo for Longhands {
+        const SUPPORTED_TYPES: u8 = ${border_left}::SUPPORTED_TYPES;
+        fn collect_completion_keywords(f: KeywordsCollectFn) {
+            ${border_left}::collect_completion_keywords(f);
+        }
+    }
 </%helpers:shorthand>
 
 <%helpers:shorthand name="border-radius" sub_properties="${' '.join(
diff --git a/components/style/properties/shorthand/font.mako.rs b/components/style/properties/shorthand/font.mako.rs
index 5e14fd6ab50..a53f899851c 100644
--- a/components/style/properties/shorthand/font.mako.rs
+++ b/components/style/properties/shorthand/font.mako.rs
@@ -19,6 +19,7 @@
                                     ${'font-language-override' if product == 'gecko' else ''}
                                     ${'font-feature-settings' if product == 'gecko' else ''}
                                     ${'font-variation-settings' if product == 'gecko' else ''}"
+                    derive_value_info="False"
                     spec="https://drafts.csswg.org/css-fonts-3/#propdef-font">
     use parser::Parse;
     use properties::longhands::{font_family, font_style, font_weight, font_stretch};
@@ -258,6 +259,29 @@
         }
         % endif
     }
+
+    <%
+        subprops_for_value_info = ["font_style", "font_weight", "font_stretch",
+                                   "font_variant_caps", "font_size", "font_family"]
+        subprops_for_value_info = [
+            "<longhands::{}::SpecifiedValue as SpecifiedValueInfo>".format(p)
+            for p in subprops_for_value_info
+        ]
+    %>
+    impl SpecifiedValueInfo for Longhands {
+        const SUPPORTED_TYPES: u8 = 0
+            % for p in subprops_for_value_info:
+            | ${p}::SUPPORTED_TYPES
+            % endfor
+            ;
+
+        fn collect_completion_keywords(f: KeywordsCollectFn) {
+            % for p in subprops_for_value_info:
+            ${p}::collect_completion_keywords(f);
+            % endfor
+            <longhands::system_font::SystemFont as SpecifiedValueInfo>::collect_completion_keywords(f);
+        }
+    }
 </%helpers:shorthand>
 
 <%helpers:shorthand name="font-variant"