diff --git a/css/map.css b/css/map.css
index ba026debf..c4a0ddc84 100644
--- a/css/map.css
+++ b/css/map.css
@@ -261,15 +261,24 @@ path.fill.tag-leisure-park {
     background-color: rgba(140, 208, 95, 0.2);
 }
 
+path.fill.tag-landuse-residential,
+path.fill.tag-landuse-retail,
+path.fill.tag-landuse-commercial,
+path.fill.tag-landuse-industrial {
+    fill: none;
+    stroke-width: 60px;
+}
+
 path.stroke.tag-landuse-residential {
     stroke: rgb(224, 110, 95);
 }
 path.fill.tag-landuse-residential {
-    fill: rgba(224, 110, 95, 0.1);
+    stroke: rgba(224, 110, 95, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-residential {
     border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(224, 110, 95, 0.3);
 }
 
 path.stroke.tag-landuse-retail,
@@ -278,23 +287,25 @@ path.stroke.tag-landuse-commercial {
 }
 path.fill.tag-landuse-retail,
 path.fill.tag-landuse-commercial {
-    fill: rgba(234, 176, 86, 0.1);
+    stroke: rgba(234, 176, 86, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-retail,
 .preset-icon-fill-area.tag-landuse-commercial {
     border-color: rgb(234, 176, 86);
-    background-color: rgba(234, 176, 86, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(234, 176, 86, 0.3);
 }
 
 path.stroke.tag-landuse-industrial {
     stroke: rgb(228, 164, 245);
 }
 path.fill.tag-landuse-industrial {
-    fill: rgba(228, 164, 245, 0.1);
+    stroke: rgba(228, 164, 245, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-industrial {
     border-color: rgb(228, 164, 245);
-    background-color: rgba(228, 164, 245, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
 }
 
 path.stroke.tag-landuse-basin,
diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js
index d2ed972d4..12070f993 100644
--- a/js/id/svg/areas.js
+++ b/js/id/svg/areas.js
@@ -17,6 +17,12 @@ iD.svg.Areas = function(projection) {
 
     var patternKeys = ['landuse', 'natural', 'amenity'];
 
+    var clipped = ['residential', 'commercial', 'retail', 'industrial'];
+
+    function clip(entity) {
+        return clipped.indexOf(entity.tags.landuse) !== -1;
+    }
+
     function setPattern(d) {
         for (var i = 0; i < patternKeys.length; i++) {
             if (patterns.hasOwnProperty(d.tags[patternKeys[i]])) {
@@ -59,11 +65,28 @@ iD.svg.Areas = function(projection) {
         });
 
         var data = {
+            clip: areas.filter(clip),
             shadow: strokes,
             stroke: strokes,
             fill: areas
         };
 
+        var clipPaths = surface.selectAll('defs').selectAll('.clipPath')
+           .filter(filter)
+           .data(data.clip, iD.Entity.key);
+
+        clipPaths.enter()
+           .append('clipPath')
+           .attr('class', 'clipPath')
+           .attr('id', function(entity) { return entity.id + '-clippath'; })
+           .append('path');
+
+        clipPaths.selectAll('path')
+           .attr('d', path);
+
+        clipPaths.exit()
+           .remove();
+
         var areagroup = surface
             .select('.layer-areas')
             .selectAll('g.areagroup')
@@ -102,6 +125,10 @@ iD.svg.Areas = function(projection) {
 
                 this.setAttribute('class', entity.type + ' area ' + layer + ' ' + entity.id);
 
+                if (layer === 'fill' && clip(entity)) {
+                    this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)');
+                }
+
                 if (layer === 'fill') {
                     setPattern.apply(this, arguments);
                 }
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index c489ea0df..fbd7ba99d 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -1,5 +1,10 @@
 iD.svg.Surface = function() {
     return function (selection) {
+        selection.selectAll('defs')
+            .data([0])
+            .enter()
+            .append('defs');
+
         var layers = selection.selectAll('.layer')
             .data(['areas', 'lines', 'hit', 'halo', 'label']);