diff --git a/core/flyout_base.js b/core/flyout_base.js
index f22b19637..4fc58bfc9 100644
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -723,20 +723,9 @@ Blockly.Flyout.prototype.moveRectToBlock_ = function(rect, block) {
   rect.setAttribute('width', blockHW.width);
   rect.setAttribute('height', blockHW.height);
 
-  // For hat blocks we want to shift them down by the hat height
-  // since the y coordinate is the corner, not the top of the hat.
-  var hatOffset =
-      block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
-  if (hatOffset) {
-    block.moveBy(0, hatOffset);
-  }
-
-  // Blocks with output tabs are shifted a bit.
-  var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
   var blockXY = block.getRelativeToSurfaceXY();
   rect.setAttribute('y', blockXY.y);
-  rect.setAttribute('x',
-      this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+  rect.setAttribute('x', this.RTL ? blockXY.x - blockHW.width : blockXY.x);
 };
 
 /**
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index b9f097cc4..80dae0e1e 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -132,20 +132,19 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
     this.highlighter_.drawRightSideRow(topRow);
   }
   this.positionPreviousConnection_();
-
+  this.steps_.push(
+      Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY));
   for (var i = 0, elem; elem = elements[i]; i++) {
-    if (elem.type === 'square corner') {
-      this.steps_.push(Blockly.blockRendering.constants.START_POINT);
-    } else if (elem.type === 'round corner') {
-      this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START,
-          Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
+    if (elem.type === 'round corner') {
+      this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
     } else if (elem.type === 'previous connection') {
-      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
+      this.steps_.push(topRow.notchShape.pathLeft);
     } else if (elem.type === 'hat') {
       this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
     } else if (elem.isSpacer()) {
       this.steps_.push('h', elem.width);
     }
+    // No branch for a square corner, because it's a no-op.
   }
   this.steps_.push('v', topRow.height);
 };
@@ -177,7 +176,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
   if (this.highlighter_) {
     this.highlighter_.drawValueInput(row);
   }
-  this.steps_.push('H', row.width);
+  this.steps_.push('H', row.xPos + row.width);
   this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
   this.steps_.push('v', row.height - input.connectionHeight);
   this.positionExternalValueConnection_(row);
@@ -195,7 +194,8 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
     this.highlighter_.drawStatementInput(row);
   }
   // Where to start drawing the notch, which is on the right side in LTR.
-  var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
+  var x = row.xPos + row.statementEdge +
+    Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
     Blockly.blockRendering.constants.NOTCH.width;
 
   this.steps_.push('H', x);
@@ -224,8 +224,8 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
   if (this.highlighter_) {
     this.highlighter_.drawRightSideRow(row);
   }
-  this.steps_.push('H', row.width);
-  this.steps_.push('v', row.height);
+  this.steps_.push('H', row.xPos + row.width);
+  this.steps_.push('V', row.yPos + row.height);
 };
 
 
@@ -245,9 +245,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
   for (var i = elems.length - 1; i >= 0; i--) {
     var elem = elems[i];
     if (elem.type === 'next connection') {
-      this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
+      this.steps_.push(bottomRow.notchShape.pathRight);
     } else if (elem.type === 'square corner') {
-      this.steps_.push('H 0');
+      this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos));
     } else if (elem.type === 'round corner') {
       this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
     } else if (elem.isSpacer()) {
@@ -269,9 +269,9 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
   var outputConnection = this.info_.outputConnection;
   this.positionOutputConnection_();
   if (outputConnection) {
+    var tabBottom = outputConnection.connectionOffsetY + outputConnection.height;
     // Draw a line up to the bottom of the tab.
-    this.steps_.push('V',
-        outputConnection.connectionOffsetY + outputConnection.height);
+    this.steps_.push('V', tabBottom);
     this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
   }
   // Close off the path.  This draws a vertical line up to the start of the
@@ -360,7 +360,7 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
 
   this.inlineSteps_.push('M', connectionRight + ',' + yPos);
   this.inlineSteps_.push('v ', connectionTop);
-  this.inlineSteps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
+  this.inlineSteps_.push(input.connectionShape.pathDown);
   this.inlineSteps_.push('v', height - connectionBottom);
   this.inlineSteps_.push('h', width - input.connectionWidth);
   this.inlineSteps_.push('v', -height);
@@ -382,6 +382,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
   var yPos = input.centerline - input.height / 2;
   // Move the connection.
   if (input.connection) {
+    // xPos already contains info about startX
     var connX = input.xPos + input.connectionWidth +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     if (this.info_.RTL) {
@@ -403,7 +404,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
 Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = function(row) {
   var input = row.getLastInput();
   if (input.connection) {
-    var connX = row.statementEdge +
+    var connX = row.xPos + row.statementEdge +
         Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     if (this.info_.RTL) {
       connX *= -1;
@@ -424,7 +425,7 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func
 Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = function(row) {
   var input = row.getLastInput();
   if (input.connection) {
-    var connX = row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
+    var connX = row.xPos + row.width + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     if (this.info_.RTL) {
       connX *= -1;
     }
@@ -437,10 +438,11 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
  * @private
  */
 Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
-  if (this.info_.topRow.hasPreviousConnection) {
-    var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
+  var topRow = this.info_.topRow;
+  if (topRow.hasPreviousConnection) {
+    var x = topRow.xPos + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
     var connX = (this.info_.RTL ? -x : x);
-    this.info_.topRow.connection.setOffsetInBlock(connX, 0);
+    topRow.connection.setOffsetInBlock(connX, 0);
   }
 };
 
@@ -453,10 +455,11 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
 
   if (bottomRow.hasNextConnection) {
     var connInfo = bottomRow.getNextConnection();
-    var x = connInfo.xPos;
+    var x = connInfo.xPos; // Already contains info about startX
     var connX = (this.info_.RTL ? -x : x) + 0.5;
     bottomRow.connection.setOffsetInBlock(
-        connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
+        connX, this.info_.height +
+            Blockly.blockRendering.constants.DARK_PATH_OFFSET);
   }
 };
 
@@ -467,7 +470,9 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
  */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
   if (this.info_.outputConnection) {
-    this.block_.outputConnection.setOffsetInBlock(0,
+    var x = this.info_.startX;
+    var connX = this.info_.RTL ? -x : x;
+    this.block_.outputConnection.setOffsetInBlock(connX,
         this.info_.outputConnection.connectionOffsetY);
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
index 19cc855ee..90f389910 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
@@ -72,7 +72,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
   this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
       {
         'class': 'rowSpacerRect blockRenderDebug',
-        'x': isRtl ? -row.width : 0,
+        'x': isRtl ? -(row.xPos + row.width) : row.xPos,
         'y': cursorY,
         'width': row.width,
         'height': row.height,
@@ -183,7 +183,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
   this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
       {
         'class': 'elemRenderingRect blockRenderDebug',
-        'x': isRtl ? -row.width : 0,
+        'x': isRtl ? -(row.xPos + row.width) : row.xPos,
         'y': cursorY ,
         'width': row.width,
         'height': row.height,
@@ -241,6 +241,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(width, height,
 Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) {
   this.clearElems();
   this.svgRoot_ = block.getSvgRoot();
+
   var cursorY = 0;
   for (var r = 0; r < info.rows.length; r++) {
     var row = info.rows[r];
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
index 234244450..be3d8af38 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
@@ -72,6 +72,8 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
+  this.steps_.push(
+      Blockly.utils.svgPaths.moveBy(row.xPos, this.info_.startY));
   for (var i = 0, elem; elem = row.elements[i]; i++) {
     if (elem.type === 'square corner') {
       this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT);
@@ -82,7 +84,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
       this.steps_.push(this.notchPaths_.pathLeft);
     } else if (elem.type === 'hat') {
       this.steps_.push(this.startPaths_.path(this.RTL_));
-    } else if (elem.isSpacer()) {
+    } else if (elem.isSpacer() && elem.width != 0) {
       // The end point of the spacer needs to be offset by the highlight amount.
       // So instead of using the spacer's width for a relative horizontal, use
       // its width and position for an absolute horizontal move.
@@ -90,7 +92,8 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
     }
   }
 
-  this.steps_.push('H', row.width - this.highlightOffset_);
+  var right = row.xPos + row.width - this.highlightOffset_;
+  this.steps_.push('H', right);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
@@ -107,17 +110,16 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
-    var aboveTabHeight = -this.highlightOffset_;
-    var belowTabHeight =
-        row.height - input.connectionHeight + this.highlightOffset_;
+    var belowTabHeight = row.height - input.connectionHeight;
 
     steps =
-        Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
+        Blockly.utils.svgPaths.moveTo(
+            row.xPos + row.width - this.highlightOffset_, row.yPos) +
         this.puzzleTabPaths_.pathDown(this.RTL_) +
         Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
   } else {
     steps =
-        Blockly.utils.svgPaths.moveTo(row.width, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(row.xPos + row.width, row.yPos) +
         this.puzzleTabPaths_.pathDown(this.RTL_);
   }
 
@@ -126,61 +128,78 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
 
 Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
   var steps = '';
+  var statementEdge = row.xPos + row.statementEdge;
   if (this.RTL_) {
     var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
     steps =
-        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos) +
+        Blockly.utils.svgPaths.moveTo(statementEdge, row.yPos) +
         this.insideCornerPaths_.pathTop(this.RTL_) +
         Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
         this.insideCornerPaths_.pathBottom(this.RTL_);
   } else {
     steps =
-        Blockly.utils.svgPaths.moveTo(row.statementEdge, row.yPos + row.height) +
+        Blockly.utils.svgPaths.moveTo(statementEdge, row.yPos + row.height) +
         this.insideCornerPaths_.pathBottom(this.RTL_);
   }
   this.steps_.push(steps);
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
+  var rightEdge = row.xPos + row.width - this.highlightOffset_;
   if (row.followsStatement) {
-    this.steps_.push('H', row.width);
+    this.steps_.push('H', rightEdge);
   }
   if (this.RTL_) {
-    this.steps_.push('H', row.width - this.highlightOffset_);
-    this.steps_.push('v', row.height);
+    this.steps_.push('H', rightEdge);
+    this.steps_.push('V', row.yPos + row.height - this.highlightOffset_);
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) {
-  var height = this.info_.height;
+Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
+  var height = row.yPos + row.height;
 
   // Highlight the vertical edge of the bottom row on the input side.
   // Highlighting is always from the top left, both in LTR and RTL.
   if (this.RTL_) {
-    this.steps_.push('V', height);
+    this.steps_.push('V', height - this.highlightOffset_);
   } else {
     var cornerElem = this.info_.bottomRow.elements[0];
     if (cornerElem.type === 'square corner') {
       this.steps_.push(
           Blockly.utils.svgPaths.moveTo(
-              this.highlightOffset_, height - this.highlightOffset_));
+              row.xPos + this.highlightOffset_,
+              height - this.highlightOffset_));
     } else if (cornerElem.type === 'round corner') {
-      this.steps_.push(this.outsideCornerPaths_.bottomLeft(height));
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(row.xPos, height));
+      this.steps_.push(this.outsideCornerPaths_.bottomLeft());
     }
   }
 };
 
 Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
-  if (this.info_.outputConnection) {
+  var outputConnection = this.info_.outputConnection;
+  if (outputConnection) {
+    var tabBottom =
+        outputConnection.connectionOffsetY + outputConnection.height;
+    // Draw a line up to the bottom of the tab.
+    if (!this.RTL_) {
+      var left = this.info_.startX + this.highlightOffset_;
+      var bottom = this.info_.height - this.highlightOffset_;
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(left, bottom));
+      this.steps_.push('V', tabBottom);
+    } else {
+      this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, tabBottom));
+    }
     this.steps_.push(
         this.puzzleTabPaths_.pathUp(this.RTL_));
   }
 
   if (!this.RTL_) {
-    if (this.info_.topRow.elements[0].isSquareCorner()) {
-      this.steps_.push('V', this.highlightOffset_);
-    } else {
+    var topRow = this.info_.topRow;
+    if (topRow.elements[0].isRoundedCorner()) {
       this.steps_.push('V', this.outsideCornerPaths_.height);
+    } else {
+      this.steps_.push('V', topRow.startY + this.highlightOffset_);
     }
   }
 };
diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js
index 9859e2e62..1262e6639 100644
--- a/core/renderers/block_rendering_rewrite/block_render_info.js
+++ b/core/renderers/block_rendering_rewrite/block_render_info.js
@@ -118,6 +118,11 @@ Blockly.blockRendering.RenderInfo = function(block) {
   this.topRow = null;
   this.bottomRow = null;
 
+  // The position of the start point for drawing, relative to the block's
+  // location.
+  this.startX = 0;
+  this.startY = 0;
+
   this.measure_();
 };
 
@@ -221,7 +226,9 @@ Blockly.blockRendering.RenderInfo.prototype.createTopRow_ = function() {
   }
 
   if (hasHat) {
-    this.topRow.elements.push(new Blockly.blockRendering.Hat());
+    var hat = new Blockly.blockRendering.Hat();
+    this.topRow.elements.push(hat);
+    this.startY = hat.startY;
   } else if (hasPrevious) {
     this.topRow.elements.push(new Blockly.blockRendering.PreviousConnection());
   }
@@ -512,6 +519,12 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() {
 
   this.widthWithChildren =
       Math.max(blockWidth, widestRowWithConnectedBlocks);
+
+  if (this.outputConnection) {
+    this.startX = this.outputConnection.width;
+    this.width += this.outputConnection.width;
+    this.widthWithChildren += this.outputConnection.width;
+  }
 };
 
 /**
@@ -525,7 +538,7 @@ Blockly.blockRendering.RenderInfo.prototype.alignRowElements_ = function() {
     var row = this.rows[r];
     if (!row.hasStatement && !row.hasInlineInput) {
       var currentWidth = row.width;
-      var desiredWidth = this.width;
+      var desiredWidth = this.width - this.startX;
       if (row.type === 'bottom row' && row.hasFixedWidth) {
         desiredWidth = Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH;
       }
@@ -623,7 +636,7 @@ Blockly.blockRendering.RenderInfo.prototype.getSpacerRowWidth_ = function(prev,
   if (next.type === 'bottom row' && next.hasFixedWidth) {
     return next.width;
   }
-  return this.width;
+  return this.width - this.startX;
 };
 
 /**
@@ -694,16 +707,19 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
   for (var r = 0; r < this.rows.length; r++) {
     var row = this.rows[r];
     row.yPos = yCursor;
+    row.xPos = this.startX;
     yCursor += row.height;
     // Add padding to the bottom row if block height is less than minimum
+    var heightWithoutHat = yCursor - this.topRow.startY;
     if (row == this.bottomRow &&
-        yCursor < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
-      this.bottomRow.height +=
-          Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - yCursor;
-      yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT;
+        heightWithoutHat < Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT) {
+      // But the hat height shouldn't be part of this.
+      var diff = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT - heightWithoutHat;
+      this.bottomRow.height += diff;
+      yCursor += diff;
     }
     if (!(row.isSpacer())) {
-      var xCursor = 0;
+      var xCursor = row.xPos;
       for (var e = 0; e < row.elements.length; e++) {
         var elem = row.elements[e];
         elem.xPos = xCursor;
@@ -712,7 +728,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() {
       }
     }
   }
-  this.blockBottom = yCursor;
 
   this.height = yCursor;
 };
diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
index e82ab67c7..f507f7cdf 100644
--- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js
@@ -108,13 +108,12 @@ Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15;
 
 Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT = 24;
 
-Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH =
-    Blockly.blockRendering.constants.TAB_WIDTH + 14.5;
+Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_PADDING = 14.5;
 
 Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT =
     Blockly.blockRendering.constants.TAB_HEIGHT + 11;
 
-Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH = 10;
+Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_PADDING = 2;
 
 /**
  * The height of an empty statement input.  Note that in the old rendering this
@@ -134,13 +133,6 @@ Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25;
 
 Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0);
 
-/**
- * SVG start point for drawing the top-left corner.
- * @const
- */
-Blockly.blockRendering.constants.TOP_LEFT_CORNER_START =
-    'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS;
-
 /**
  * Height of SVG path for jagged teeth at the end of collapsed blocks.
  * @const
@@ -183,6 +175,7 @@ Blockly.blockRendering.constants.START_HAT = (function() {
   var width = Blockly.blockRendering.constants.START_HAT_WIDTH;
 
   var mainPath =
+      Blockly.utils.svgPaths.moveBy(0, height) +
       Blockly.utils.svgPaths.curve('c',
           [
             Blockly.utils.svgPaths.point(30, -height),
@@ -291,8 +284,11 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() {
    * SVG path for drawing the rounded top-left corner.
    * @const
    */
-  var topLeft = Blockly.utils.svgPaths.arc('A', '0 0,1', radius,
-      Blockly.utils.svgPaths.point(radius, 0));
+
+  var topLeft =
+      Blockly.utils.svgPaths.moveBy(0, radius) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
+          Blockly.utils.svgPaths.point(radius, -radius));
 
   var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
       Blockly.utils.svgPaths.point(-radius, -radius));
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js
index bd8ac7f32..ea42cbe53 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/block_rendering_rewrite/highlight_constants.js
@@ -103,39 +103,36 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() {
    */
   var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;
 
-  /**
-   * SVG start point for drawing the top-left corner's highlight in RTL.
-   * @const
-   */
-  var topLeftCornerStartRtl =
-      Blockly.utils.svgPaths.moveBy(distance45inside, distance45inside);
-
-  /**
-   * SVG start point for drawing the top-left corner's highlight in LTR.
-   * @const
-   */
-  var topLeftCornerStartLtr =
-      Blockly.utils.svgPaths.moveBy(offset, radius - offset);
-
+  var topLeftStartX = distance45inside;
+  var topLeftStartY = distance45inside;
+  var topLeftCornerHighlightRtl =
+      Blockly.utils.svgPaths.moveBy(topLeftStartX, topLeftStartY) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+          Blockly.utils.svgPaths.point(radius - topLeftStartX, -topLeftStartY + offset));
   /**
    * SVG path for drawing the highlight on the rounded top-left corner.
    * @const
    */
-  var topLeftCornerHighlight =
-      Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
-          Blockly.utils.svgPaths.point(radius, offset));
+  var topLeftCornerHighlightLtr =
+      Blockly.utils.svgPaths.moveBy(offset, radius) +
+      Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+          Blockly.utils.svgPaths.point(radius, -radius + offset));
+
+  var bottomLeftStartX = distance45inside;
+  var bottomLeftStartY = -distance45inside;
+  var bottomLeftPath = Blockly.utils.svgPaths.moveBy(
+      bottomLeftStartX, bottomLeftStartY) +
+          Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset,
+              Blockly.utils.svgPaths.point(-bottomLeftStartX + offset,
+                  -bottomLeftStartY - radius));
 
   return {
     height: radius,
     topLeft: function(rtl) {
-      var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr;
-      return start + topLeftCornerHighlight;
+      return rtl ? topLeftCornerHighlightRtl : topLeftCornerHighlightLtr;
     },
-    bottomLeft: function(yPos) {
-      return Blockly.utils.svgPaths.moveTo(
-          distance45inside + offset, yPos - distance45inside) +
-          Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset,
-              Blockly.utils.svgPaths.point(offset, yPos - radius));
+    bottomLeft: function() {
+      return bottomLeftPath;
     }
   };
 })();
@@ -150,7 +147,7 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
   var verticalOverlap = 2.5;
 
   var highlightRtlUp =
-      Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) +
+      Blockly.utils.svgPaths.moveBy(-2, -height + verticalOverlap + 0.9) +
       Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1);
 
   var highlightRtlDown =
@@ -165,18 +162,14 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() {
       Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);
 
   var highlightLtrUp =
-      // TODO: Move this 'V' out.
-      Blockly.utils.svgPaths.lineOnAxis('V',
-          height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
+      Blockly.utils.svgPaths.lineOnAxis('v', -1.5) +
       Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) +
       Blockly.utils.svgPaths.curve('q',
           [
             Blockly.utils.svgPaths.point(width * -0.19, -5.5),
             Blockly.utils.svgPaths.point(0,-11)
           ]) +
-      Blockly.utils.svgPaths.moveBy(width * 0.92, 1) +
-      Blockly.utils.svgPaths.lineOnAxis('V', 0.5) +
-      Blockly.utils.svgPaths.lineOnAxis('H', 1);
+      Blockly.utils.svgPaths.moveBy(width * 0.92, 1);
 
   var highlightLtrDown =
       Blockly.utils.svgPaths.moveBy(-5, height - 0.7) +
@@ -216,6 +209,7 @@ Blockly.blockRendering.highlightConstants.JAGGED_TEETH = (function() {
 })();
 
 Blockly.blockRendering.highlightConstants.START_HAT = (function() {
+  var hatHeight = Blockly.blockRendering.constants.START_HAT.height;
   var pathRtl =
       Blockly.utils.svgPaths.moveBy(25, -8.7) +
       Blockly.utils.svgPaths.curve('c',
@@ -232,7 +226,7 @@ Blockly.blockRendering.highlightConstants.START_HAT = (function() {
             Blockly.utils.svgPaths.point(45.3, -14.9),
             Blockly.utils.svgPaths.point(75, -8.7)
           ]) +
-      Blockly.utils.svgPaths.moveTo(100.5, 0.5);
+      Blockly.utils.svgPaths.moveTo(100.5, hatHeight + 0.5);
   return {
     path: function(rtl) {
       return rtl ? pathRtl : pathLtr;
diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js
index e781afb0c..de88510b5 100644
--- a/core/renderers/block_rendering_rewrite/measurables.js
+++ b/core/renderers/block_rendering_rewrite/measurables.js
@@ -255,12 +255,12 @@ Blockly.blockRendering.InlineInput = function(input) {
 
   if (!this.connectedBlock) {
     this.height = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_HEIGHT;
-    this.width = Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_WIDTH;
+    this.width = this.connectionShape.width +
+        Blockly.blockRendering.constants.EMPTY_INLINE_INPUT_PADDING;
   } else {
     // We allow the dark path to show on the parent block so that the child
     // block looks embossed.  This takes up an extra pixel in both x and y.
     this.width = this.connectedBlockWidth +
-        Blockly.blockRendering.constants.TAB_WIDTH +
         Blockly.blockRendering.constants.DARK_PATH_OFFSET;
     this.height = this.connectedBlockHeight + Blockly.blockRendering.constants.DARK_PATH_OFFSET;
   }
@@ -316,7 +316,8 @@ Blockly.blockRendering.ExternalValueInput = function(input) {
     this.height =
         this.connectedBlockHeight - 2 * Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
   }
-  this.width = Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_WIDTH;
+  this.width = this.connectionShape.width +
+      Blockly.blockRendering.constants.EXTERNAL_VALUE_INPUT_PADDING;
 
   this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
   this.connectionHeight = this.connectionShape.height;
@@ -337,6 +338,7 @@ Blockly.blockRendering.OutputConnection = function() {
   this.height = this.connectionShape.height;
   this.width = this.connectionShape.width;
   this.connectionOffsetY = Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP;
+  this.startX = this.width;
 };
 goog.inherits(Blockly.blockRendering.OutputConnection, Blockly.blockRendering.Measurable);
 
@@ -378,8 +380,9 @@ goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Meas
 Blockly.blockRendering.Hat = function() {
   Blockly.blockRendering.Hat.superClass_.constructor.call(this);
   this.type = 'hat';
-  this.height = Blockly.blockRendering.constants.NO_PADDING;
+  this.height = Blockly.blockRendering.constants.START_HAT.height;
   this.width = Blockly.blockRendering.constants.START_HAT.width;
+  this.startY = this.height;
 
 };
 goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);
@@ -448,9 +451,12 @@ Blockly.blockRendering.Row.prototype.measure = function() {
   for (var e = 0; e < this.elements.length; e++) {
     var elem = this.elements[e];
     this.width += elem.width;
-    if (elem.isInput &&
-        (elem.type == 'statement input' || elem.type == 'external value input')) {
-      connectedBlockWidths += elem.connectedBlockWidth;
+    if (elem.isInput) {
+      if (elem.type == 'statement input') {
+        connectedBlockWidths += elem.connectedBlockWidth;
+      } else if (elem.type == 'external value input') {
+        connectedBlockWidths += (elem.connectedBlockWidth - elem.connectionWidth);
+      }
     }
     if (!(elem.isSpacer())) {
       this.height = Math.max(this.height, elem.height);
@@ -512,6 +518,7 @@ Blockly.blockRendering.TopRow = function(block) {
 
   this.elements = [];
   this.type = 'top row';
+  this.startY = 0;
 
   this.hasPreviousConnection = !!block.previousConnection;
   this.connection = block.previousConnection;
@@ -537,6 +544,21 @@ Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() {
   return null;
 };
 
+Blockly.blockRendering.TopRow.prototype.measure = function() {
+  for (var e = 0; e < this.elements.length; e++) {
+    var elem = this.elements[e];
+    this.width += elem.width;
+    if (!(elem.isSpacer())) {
+      if (elem.type == 'hat') {
+        this.startY = elem.startY;
+        this.height = this.height + elem.height;
+      }
+      this.height = Math.max(this.height, elem.height);
+    }
+  }
+  this.widthWithConnectedBlocks = this.width;
+};
+
 Blockly.blockRendering.BottomRow = function(block) {
   Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
   this.type = 'bottom row';