diff --git a/components/layout/display_list/border.rs b/components/layout/display_list/border.rs
index 265b25a2805..d5909abee84 100644
--- a/components/layout/display_list/border.rs
+++ b/components/layout/display_list/border.rs
@@ -14,6 +14,7 @@ use style::values::computed::{BorderCornerRadius, BorderImageWidth};
 use style::values::computed::{BorderImageSideWidth, LengthOrNumber};
 use style::values::generics::border::BorderImageSideWidth as GenericBorderImageSideWidth;
 use style::values::generics::rect::Rect as StyleRect;
+use style::values::generics::NonNegative;
 use style::values::Either;
 use webrender_api::{BorderRadius, BorderSide, BorderStyle, ColorF};
 use webrender_api::{LayoutSideOffsets, LayoutSize, NormalBorder};
@@ -163,7 +164,7 @@ fn side_image_width(
 ) -> f32 {
     match border_image_width {
         GenericBorderImageSideWidth::Length(v) => v.to_used_value(total_length).to_f32_px(),
-        GenericBorderImageSideWidth::Number(x) => border_width * x,
+        GenericBorderImageSideWidth::Number(x) => border_width * x.0,
         GenericBorderImageSideWidth::Auto => border_width,
     }
 }
@@ -181,15 +182,15 @@ pub fn image_width(
     )
 }
 
-fn resolve_percentage(value: NumberOrPercentage, length: i32) -> i32 {
-    match value {
+fn resolve_percentage(value: NonNegative<NumberOrPercentage>, length: i32) -> i32 {
+    match value.0 {
         NumberOrPercentage::Percentage(p) => (p.0 * length as f32).round() as i32,
         NumberOrPercentage::Number(n) => n.round() as i32,
     }
 }
 
 pub fn image_slice(
-    border_image_slice: &StyleRect<NumberOrPercentage>,
+    border_image_slice: &StyleRect<NonNegative<NumberOrPercentage>>,
     width: i32,
     height: i32,
 ) -> SideOffsets2D<i32> {
diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index 91cc8939590..233d4a01bb3 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -128,6 +128,7 @@ use style::selector_parser::{
 };
 use style::shared_lock::{Locked, SharedRwLock};
 use style::thread_state;
+use style::values::generics::NonNegative;
 use style::values::{computed, specified};
 use style::values::{CSSFloat, Either};
 use style::CaseSensitivityExt;
@@ -847,8 +848,9 @@ impl LayoutElementHelpers for LayoutDom<Element> {
         };
 
         if let Some(border) = border {
-            let width_value =
-                specified::BorderSideWidth::Length(specified::Length::from_px(border as f32));
+            let width_value = specified::BorderSideWidth::Length(NonNegative(
+                specified::Length::from_px(border as f32),
+            ));
             hints.push(from_declaration(
                 shared_lock,
                 PropertyDeclaration::BorderTopWidth(width_value.clone()),