diff --git a/components/script/dom/webidls/CSSStyleDeclaration.webidl b/components/script/dom/webidls/CSSStyleDeclaration.webidl
index a8cd456c41d..3cc11418150 100644
--- a/components/script/dom/webidls/CSSStyleDeclaration.webidl
+++ b/components/script/dom/webidls/CSSStyleDeclaration.webidl
@@ -127,6 +127,14 @@ partial interface CSSStyleDeclaration {
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderInlineEndWidth;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString border-inline-end-style;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderInlineEndStyle;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString border-block-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderBlockStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString border-block-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderBlockEnd;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString border-inline-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderInlineStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString border-inline-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString borderInlineEnd;
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString content;
 
@@ -267,6 +275,14 @@ partial interface CSSStyleDeclaration {
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-right;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString marginTop;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-top;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-block-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString marginBlockStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-block-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString marginBlockEnd;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-inline-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString marginInlineStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString margin-inline-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString marginInlineEnd;
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingBottom;
@@ -277,6 +293,14 @@ partial interface CSSStyleDeclaration {
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-right;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingTop;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-top;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-block-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingBlockStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-block-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingBlockEnd;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-inline-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingInlineStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString padding-inline-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString paddingInlineEnd;
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString outline;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString outlineColor;
diff --git a/components/style/properties/longhand/margin.mako.rs b/components/style/properties/longhand/margin.mako.rs
index 32f5243d745..8ddc676d21f 100644
--- a/components/style/properties/longhand/margin.mako.rs
+++ b/components/style/properties/longhand/margin.mako.rs
@@ -3,11 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-
+<% from data import ALL_SIDES %>
 <% data.new_style_struct("Margin", inherited=False) %>
 
-% for side in ["top", "right", "bottom", "left"]:
-    ${helpers.predefined_type("margin-" + side, "LengthOrPercentageOrAuto",
+% for side in ALL_SIDES:
+    ${helpers.predefined_type("margin-%s" % side[0], "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Length(Au(0))",
-                              animatable=True)}
+                              animatable=True, logical = side[1])}
 % endfor
diff --git a/components/style/properties/longhand/padding.mako.rs b/components/style/properties/longhand/padding.mako.rs
index f022ba58878..72626e69f90 100644
--- a/components/style/properties/longhand/padding.mako.rs
+++ b/components/style/properties/longhand/padding.mako.rs
@@ -3,12 +3,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-
+<% from data import ALL_SIDES %>
 <% data.new_style_struct("Padding", inherited=False) %>
 
-% for side in ["top", "right", "bottom", "left"]:
-    ${helpers.predefined_type("padding-" + side, "LengthOrPercentage",
+% for side in ALL_SIDES:
+    ${helpers.predefined_type("padding-%s" % side[0], "LengthOrPercentage",
                                "computed::LengthOrPercentage::Length(Au(0))",
                                "parse_non_negative",
-                               animatable=True)}
+                               animatable=True,
+                               logical = side[1])}
 % endfor
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index ef04ab474f0..9d65f533e4a 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import to_rust_ident %>
+<% from data import to_rust_ident, ALL_SIDES %>
 
 ${helpers.four_sides_shorthand("border-color", "border-%s-color", "specified::CSSColor::parse")}
 ${helpers.four_sides_shorthand("border-style", "border-%s-style",
@@ -83,7 +83,7 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     if any { Ok((color, style, width)) } else { Err(()) }
 }
 
-% for side in ["top", "right", "bottom", "left"]:
+% for side in map(lambda x: x[0], ALL_SIDES):
     <%helpers:shorthand name="border-${side}" sub_properties="${' '.join(
         'border-%s-%s' % (side, prop)
         for prop in ['color', 'style', 'width']
@@ -92,9 +92,9 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let (color, style, width) = try!(super::parse_border(context, input));
         Ok(Longhands {
-            border_${side}_color: color,
-            border_${side}_style: style,
-            border_${side}_width: width
+            border_${to_rust_ident(side)}_color: color,
+            border_${to_rust_ident(side)}_style: style,
+            border_${to_rust_ident(side)}_width: width
         })
     }
 
@@ -102,9 +102,9 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
         fn to_css_declared<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
             super::serialize_directional_border(
                 dest,
-                self.border_${side}_width,
-                self.border_${side}_style,
-                self.border_${side}_color
+                self.border_${to_rust_ident(side)}_width,
+                self.border_${to_rust_ident(side)}_style,
+                self.border_${to_rust_ident(side)}_color
             )
         }
     }