diff --git a/components/gfx/paint_context.rs b/components/gfx/paint_context.rs
index 499cdf1397e..6e08dce0445 100644
--- a/components/gfx/paint_context.rs
+++ b/components/gfx/paint_context.rs
@@ -598,10 +598,22 @@ impl<'a> PaintContext<'a>  {
                 border_style::ridge  =>  false,
                 _                    =>  panic!("invalid border style")
         };
-        let darker_color               = self.scale_color(color, if is_groove { 1.0/3.0 } else { 2.0/3.0 });
+
+        let mut lighter_color;
+        let mut darker_color;
+
+        if color.r != 0.0 || color.g != 0.0 || color.b != 0.0 {
+            darker_color = self.scale_color(color, if is_groove { 1.0/3.0 } else { 2.0/3.0 });
+            lighter_color = self.scale_color(color, if is_groove { 1.5/3.0 } else { 2.5/3.0 });
+        } else {
+            // You can't scale black color (i.e. 'scaled = 0 * scale', equals black).
+            darker_color = Color::new(0.3, 0.3, 0.3, color.a);
+            lighter_color = Color::new(0.7, 0.7, 0.7, color.a);
+        }
+
         let (outer_color, inner_color) = match (direction, is_groove) {
-            (Top, true)  | (Left, true)  | (Right, false) | (Bottom, false) => (darker_color, color),
-            (Top, false) | (Left, false) | (Right, true)  | (Bottom, true)  => (color, darker_color)
+            (Top, true)  | (Left, true)  | (Right, false) | (Bottom, false) => (darker_color, lighter_color),
+            (Top, false) | (Left, false) | (Right, true)  | (Bottom, true)  => (lighter_color, darker_color)
         };
         // outer portion of the border
         self.draw_border_path(&original_bounds, direction, scaled_border, radius, outer_color);