diff --git a/core/rendered_connection.js b/core/rendered_connection.js
index f5d55ab1b..5ede9de0e 100644
--- a/core/rendered_connection.js
+++ b/core/rendered_connection.js
@@ -284,21 +284,22 @@ Blockly.RenderedConnection.prototype.closest = function(maxLimit, dxy) {
 Blockly.RenderedConnection.prototype.highlight = function() {
   var steps;
   var sourceBlockSvg = /** @type {!Blockly.BlockSvg} */ (this.sourceBlock_);
-  var renderingConstants =
-    sourceBlockSvg.workspace.getRenderer().getConstants();
+  var renderConstants = sourceBlockSvg.workspace.getRenderer().getConstants();
+  var shape = renderConstants.shapeFor(this);
   if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
     // Vertical line, puzzle tab, vertical line.
-    var yLen = 5;
+    var yLen = renderConstants.TAB_OFFSET_FROM_TOP;
     steps = Blockly.utils.svgPaths.moveBy(0, -yLen) +
         Blockly.utils.svgPaths.lineOnAxis('v', yLen) +
-        renderingConstants.PUZZLE_TAB.pathDown +
+        shape.pathDown +
         Blockly.utils.svgPaths.lineOnAxis('v', yLen);
   } else {
-    var xLen = 5;
+    var xLen =
+        renderConstants.NOTCH_OFFSET_LEFT - renderConstants.CORNER_RADIUS;
     // Horizontal line, notch, horizontal line.
     steps = Blockly.utils.svgPaths.moveBy(-xLen, 0) +
         Blockly.utils.svgPaths.lineOnAxis('h', xLen) +
-        renderingConstants.NOTCH.pathLeft +
+        shape.pathLeft +
         Blockly.utils.svgPaths.lineOnAxis('h', xLen);
   }
   var xy = this.sourceBlock_.getRelativeToSurfaceXY();
diff --git a/core/renderers/common/marker_svg.js b/core/renderers/common/marker_svg.js
index 37dc877be..8fbe618a5 100644
--- a/core/renderers/common/marker_svg.js
+++ b/core/renderers/common/marker_svg.js
@@ -179,9 +179,11 @@ Blockly.blockRendering.MarkerSvg.prototype.showWithBlockPrevOutput_ = function(b
   var markerOffset = this.constants_.CURSOR_BLOCK_PADDING;
 
   if (block.previousConnection) {
-    this.positionPrevious_(width, markerOffset, markerHeight);
+    var connectionShape = this.constants_.shapeFor(block.previousConnection);
+    this.positionPrevious_(width, markerOffset, markerHeight, connectionShape);
   } else if (block.outputConnection) {
-    this.positionOutput_(width, height);
+    var connectionShape = this.constants_.shapeFor(block.outputConnection);
+    this.positionOutput_(width, height, connectionShape);
   } else {
     this.positionBlock_(width, markerOffset, markerHeight);
   }
@@ -367,15 +369,19 @@ Blockly.blockRendering.MarkerSvg.prototype.positionLine_ = function(x, y, width)
  * Displays a puzzle outline and the top and bottom path.
  * @param {number} width The width of the block.
  * @param {number} height The height of the block.
+ * @param {!Object} connectionShape The shape object for the connection.
  * @private
  */
-Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(width, height) {
+Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(
+    width, height, connectionShape) {
   var markerPath = Blockly.utils.svgPaths.moveBy(width, 0) +
-    Blockly.utils.svgPaths.lineOnAxis('h', -(width - this.constants_.PUZZLE_TAB.width)) +
-    Blockly.utils.svgPaths.lineOnAxis('v', this.constants_.TAB_OFFSET_FROM_TOP) +
-    this.constants_.PUZZLE_TAB.pathDown +
-    Blockly.utils.svgPaths.lineOnAxis('V', height) +
-    Blockly.utils.svgPaths.lineOnAxis('H', width);
+      Blockly.utils.svgPaths.lineOnAxis(
+          'h', -(width - connectionShape.width)) +
+      Blockly.utils.svgPaths.lineOnAxis(
+          'v', this.constants_.TAB_OFFSET_FROM_TOP) +
+      connectionShape.pathDown +
+      Blockly.utils.svgPaths.lineOnAxis('V', height) +
+      Blockly.utils.svgPaths.lineOnAxis('H', width);
   this.markerBlock_.setAttribute('d', markerPath);
   if (this.workspace_.RTL) {
     this.flipRtl_(this.markerBlock_);
@@ -390,15 +396,18 @@ Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(width, hei
  * @param {number} width The width of the block.
  * @param {number} markerOffset The offset of the marker from around the block.
  * @param {number} markerHeight The height of the marker.
+ * @param {!Object} connectionShape The shape object for the connection.
  * @private
  */
 Blockly.blockRendering.MarkerSvg.prototype.positionPrevious_ = function(
-    width, markerOffset, markerHeight) {
+    width, markerOffset, markerHeight, connectionShape) {
   var markerPath = Blockly.utils.svgPaths.moveBy(-markerOffset, markerHeight) +
       Blockly.utils.svgPaths.lineOnAxis('V', -markerOffset) +
-      Blockly.utils.svgPaths.lineOnAxis('H', this.constants_.NOTCH_OFFSET_LEFT) +
-      this.constants_.NOTCH.pathLeft +
-      Blockly.utils.svgPaths.lineOnAxis('H', width + markerOffset * 2) +
+      Blockly.utils.svgPaths.lineOnAxis(
+          'H', this.constants_.NOTCH_OFFSET_LEFT) +
+      connectionShape.pathLeft +
+      Blockly.utils.svgPaths.lineOnAxis(
+          'H', width + markerOffset * 2) +
       Blockly.utils.svgPaths.lineOnAxis('V', markerHeight);
   this.markerBlock_.setAttribute('d', markerPath);
   if (this.workspace_.RTL) {