--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -441,17 +441,17 @@ html #webconsole-notificationbox {
 
 html .jsterm-stack-node {
   position: relative;
 }
 
 textarea.jsterm-input-node,
 textarea.jsterm-complete-node {
   width: 100%;
-  border: none;
+  border: 1px solid transparent;
   margin: 0;
   background-color: transparent;
   resize: none;
   font-size: inherit;
   line-height: 16px;
   overflow-x: hidden;
   /* Set padding for console input on textarea to make sure it is included in
      scrollHeight that is used when resizing JSTerminal's input. */
@@ -465,16 +465,24 @@ textarea.jsterm-complete-node {
   left: 0;
   height: 100%;
   pointer-events: none;
 }
 
 textarea.jsterm-input-node:focus {
   background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
+  border: 1px solid var(--blue-50);
+  transition: border-color 0.2s ease-in-out;
+  outline: none;
+}
+
+:root[platform="mac"] textarea.jsterm-input-node,
+:root[platform="mac"] textarea.jsterm-complete-node {
+  border-radius: 0 0 4px 4px;
 }
 
 
 /*  styles for the old frontend, which can be removed in Bug 1381834 */
 
 textbox.jsterm-input-node,
 textbox.jsterm-complete-node {
   border: none;

--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -256,16 +256,18 @@ JSTerm.prototype = {
     let toolbox = gDevTools.getToolbox(this.hud.owner.target);
     let tooltipDoc = toolbox ? toolbox.doc : doc;
     // The popup will be attached to the toolbox document or HUD document in the case
     // such as the browser console which doesn't have a toolbox.
     this.autocompletePopup = new AutocompletePopup(tooltipDoc, autocompleteOptions);
     let inputContainer = doc.querySelector(".jsterm-input-container");
     this.completeNode = doc.querySelector(".jsterm-complete-node");
     this.inputNode = doc.querySelector(".jsterm-input-node");
+    this.inputBorderSize = this.inputNode.getBoundingClientRect().height -
+                           this.inputNode.clientHeight;
     // Update the character width and height needed for the popup offset
     // calculations.
     this._updateCharSize();
 
     if (this.hud.isBrowserConsole &&
         !Services.prefs.getBoolPref("devtools.chrome.enabled")) {
       inputContainer.style.display = "none";
     } else {
@@ -1031,17 +1033,17 @@ JSTerm.prototype = {
 
     // Now resize the input field to fit its contents.
     // TODO: remove `inputNode.inputField.scrollHeight` when the old
     // console UI is removed. See bug 1381834
     let scrollHeight = inputNode.inputField ?
       inputNode.inputField.scrollHeight : inputNode.scrollHeight;
 
     if (scrollHeight > 0) {
-      inputNode.style.height = scrollHeight + "px";
+      inputNode.style.height = (scrollHeight + this.inputBorderSize) + "px";
     }
   },
 
   /**
    * Sets the value of the input field (command line), and resizes the field to
    * fit its contents. This method is preferred over setting "inputNode.value"
    * directly, because it correctly resizes the field.
    *