diff --git a/modules/core/src/shaderlib/misc/geometry.js b/modules/core/src/shaderlib/misc/geometry.js
index f5867def2a03..129e8043edee 100644
--- a/modules/core/src/shaderlib/misc/geometry.js
+++ b/modules/core/src/shaderlib/misc/geometry.js
@@ -30,9 +30,15 @@ struct VertexGeometry {
 `;
 
 const fs = `
+#define SMOOTH_EDGE_RADIUS 0.5
+
 struct FragmentGeometry {
   vec2 uv;
 } geometry;
+
+float smoothedge(float edge, float x) {
+  return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
+}
 `;
 
 export default {name: 'geometry', vs, fs};
diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js
index 548a6d5b8884..4b370e85da03 100644
--- a/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js
+++ b/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js
@@ -24,28 +24,41 @@ export default `\
 precision highp float;
 
 uniform bool filled;
+uniform float stroked;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
+varying float outerRadiusPixels;
 
 void main(void) {
   geometry.uv = unitPosition;
 
-  float distToCenter = length(unitPosition);
+  float distToCenter = length(unitPosition) * outerRadiusPixels;
+  float inCircle = smoothedge(distToCenter, outerRadiusPixels);
 
-  if (distToCenter > 1.0) {
+  if (inCircle == 0.0) {
     discard;
-  } 
-  if (distToCenter > innerUnitRadius) {
-    gl_FragColor = vLineColor;
+  }
+
+  if (stroked > 0.5) {
+    float isLine = smoothedge(innerUnitRadius * outerRadiusPixels, distToCenter);
+    if (filled) {
+      gl_FragColor = mix(vFillColor, vLineColor, isLine);
+    } else {
+      if (isLine == 0.0) {
+        discard;
+      }
+      gl_FragColor = vec4(vLineColor.rgb, vLineColor.a * isLine);
+    }
   } else if (filled) {
     gl_FragColor = vFillColor;
   } else {
     discard;
   }
 
+  gl_FragColor.a *= inCircle;
   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
index dcd32e81bc00..13593950b7b7 100644
--- a/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
+++ b/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
@@ -45,12 +45,13 @@ varying vec4 vFillColor;
 varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
+varying float outerRadiusPixels;
 
 void main(void) {
   geometry.worldPosition = instancePositions;
 
   // Multiply out radius and clamp to limits
-  float outerRadiusPixels = clamp(
+  outerRadiusPixels = clamp(
     project_size_to_pixel(radiusScale * instanceRadius),
     radiusMinPixels, radiusMaxPixels
   );
diff --git a/test/modules/core/lib/pick-layers.spec.js b/test/modules/core/lib/pick-layers.spec.js
index d4518486e771..edc1cddc6f66 100644
--- a/test/modules/core/lib/pick-layers.spec.js
+++ b/test/modules/core/lib/pick-layers.spec.js
@@ -410,7 +410,7 @@ const TEST_CASES = [
             height: 400
           },
           results: {
-            count: 33
+            count: 34
           }
         },
         {
diff --git a/test/render/golden-images/post-process-effects.png b/test/render/golden-images/post-process-effects.png
index a12a1b97e39b..f74257c5bcd0 100644
Binary files a/test/render/golden-images/post-process-effects.png and b/test/render/golden-images/post-process-effects.png differ
diff --git a/test/render/golden-images/scatterplot-lnglat.png b/test/render/golden-images/scatterplot-lnglat.png
index 9c87488530c1..545c508e627c 100644
Binary files a/test/render/golden-images/scatterplot-lnglat.png and b/test/render/golden-images/scatterplot-lnglat.png differ