--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1052,44 +1052,47 @@ this.UITour = {
       highlighter.setAttribute("active", effect);
       highlighter.parentElement.setAttribute("targetName", aTarget.targetName);
       highlighter.parentElement.hidden = false;
 
       let highlightAnchor = this._correctAnchor(aTarget.node);
       let targetRect = highlightAnchor.getBoundingClientRect();
       let highlightHeight = targetRect.height;
       let highlightWidth = targetRect.width;
-      let minDimension = Math.min(highlightHeight, highlightWidth);
-      let maxDimension = Math.max(highlightHeight, highlightWidth);
 
-      // If the dimensions are within 200% of each other (to include the bookmarks button),
-      // make the highlight a circle with the largest dimension as the diameter.
-      if (maxDimension / minDimension <= 3.0) {
-        highlightHeight = highlightWidth = maxDimension;
-        highlighter.style.borderRadius = "100%";
+      if (this.targetIsInAppMenu(aTarget)) {
+        highlighter.classList.remove("rounded-highlight");
       } else {
-        highlighter.style.borderRadius = "";
+        highlighter.classList.add("rounded-highlight");
+      }
+      if (highlightAnchor.classList.contains("toolbarbutton-1") &&
+          highlightAnchor.getAttribute("cui-areatype") === "toolbar" &&
+          highlightAnchor.getAttribute("overflowedItem") !== "true") {
+        // A toolbar button in navbar has its clickable area an
+        // inner-contained square while the button component itself is a tall
+        // rectangle. We adjust the highlight area to a square as well.
+        highlightHeight = highlightWidth;
       }
 
       highlighter.style.height = highlightHeight + "px";
       highlighter.style.width = highlightWidth + "px";
 
       // Close a previous highlight so we can relocate the panel.
       if (highlighter.parentElement.state == "showing" || highlighter.parentElement.state == "open") {
         log.debug("showHighlight: Closing previous highlight first");
         highlighter.parentElement.hidePopup();
       }
       /* The "overlap" position anchors from the top-left but we want to centre highlights at their
          minimum size. */
       let highlightWindow = aChromeWindow;
       let highlightStyle = highlightWindow.getComputedStyle(highlighter);
       let highlightHeightWithMin = Math.max(highlightHeight, parseFloat(highlightStyle.minHeight));
       let highlightWidthWithMin = Math.max(highlightWidth, parseFloat(highlightStyle.minWidth));
-      let offsetX = -(Math.max(0, highlightWidthWithMin - targetRect.width) / 2);
-      let offsetY = -(Math.max(0, highlightHeightWithMin - targetRect.height) / 2);
+      let offsetX = (targetRect.width - highlightWidthWithMin) / 2;
+      let offsetY = (targetRect.height - highlightHeightWithMin) / 2;
       this._addAnnotationPanelMutationObserver(highlighter.parentElement);
       highlighter.parentElement.openPopup(highlightAnchor, "overlap", offsetX, offsetY);
     }
 
     // Prevent showing a panel at an undefined position.
     if (!this.isElementVisible(aTarget.node)) {
       log.warn("showHighlight: Not showing a highlight since the target isn't visible", aTarget);
       return;

--- a/browser/components/uitour/test/browser_UITour.js
+++ b/browser/components/uitour/test/browser_UITour.js
@@ -99,42 +99,42 @@ var tests = [
     }
 
     let highlight = document.getElementById("UITourHighlight");
     is_element_hidden(highlight, "Highlight should initially be hidden");
 
     gContentAPI.showHighlight("urlbar");
     waitForElementToBeVisible(highlight, test_highlight_2, "Highlight should be shown after showHighlight()");
   },
-  function test_highlight_circle(done) {
+  function test_highlight_toolbar_button(done) {
     function check_highlight_size() {
       let panel = highlight.parentElement;
       let anchor = panel.anchorNode;
       let anchorRect = anchor.getBoundingClientRect();
       info("addons target: width: " + anchorRect.width + " height: " + anchorRect.height);
-      let maxDimension = Math.round(Math.max(anchorRect.width, anchorRect.height));
+      let dimension = anchorRect.width;
       let highlightRect = highlight.getBoundingClientRect();
       info("highlight: width: " + highlightRect.width + " height: " + highlightRect.height);
-      is(Math.round(highlightRect.width), maxDimension, "The width of the highlight should be equal to the largest dimension of the target");
-      is(Math.round(highlightRect.height), maxDimension, "The height of the highlight should be equal to the largest dimension of the target");
-      is(Math.round(highlightRect.height), Math.round(highlightRect.width), "The height and width of the highlight should be the same to create a circle");
-      is(highlight.style.borderRadius, "100%", "The border-radius should be 100% to create a circle");
+      is(Math.round(highlightRect.width), dimension, "The width of the highlight should be equal to the width of the target");
+      is(Math.round(highlightRect.height), dimension, "The height of the highlight should be equal to the width of the target");
+      is(highlight.classList.contains("rounded-highlight"), true, "Highlight should be rounded-rectangle styled");
       done();
     }
     let highlight = document.getElementById("UITourHighlight");
     is_element_hidden(highlight, "Highlight should initially be hidden");
 
     gContentAPI.showHighlight("home");
     waitForElementToBeVisible(highlight, check_highlight_size, "Highlight should be shown after showHighlight()");
   },
   function test_highlight_customize_auto_open_close(done) {
     let highlight = document.getElementById("UITourHighlight");
     gContentAPI.showHighlight("customize");
     waitForElementToBeVisible(highlight, function checkPanelIsOpen() {
       isnot(PanelUI.panel.state, "closed", "Panel should have opened");
+      isnot(highlight.classList.contains("rounded-highlight"), true, "Highlight should not be round-rectangle styled.");
 
       // Move the highlight outside which should close the app menu.
       gContentAPI.showHighlight("appMenu");
       waitForElementToBeVisible(highlight, function checkPanelIsClosed() {
         isnot(PanelUI.panel.state, "open",
               "Panel should have closed after the highlight moved elsewhere.");
         done();
       }, "Highlight should move to the appMenu button");

--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -14,24 +14,23 @@
   /* This is a buffer to compensate for the movement in the "wobble" effect,
      and for the box-shadow of #UITourHighlight. */
   padding: 4px;
   /* Compensate the displacement caused by padding. */
   margin: -4px;
 }
 
 #UITourHighlight {
-  background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
-  border-radius: 40px;
-  border: 1px solid white;
-  /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
-     on Linux without an X compositor where opacity is either 0 or 1. */
-  box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
-  min-height: 32px;
-  min-width: 32px;
+  background-color: rgba(0, 200, 215, 0.3);
+  min-height: 24px;
+  min-width: 24px;
+}
+
+#UITourHighlight.rounded-highlight {
+  border-radius: 4px;
 }
 
 #UITourTooltipBody {
   -moz-box-align: start;
 }
 
 #UITourTooltipTitleContainer {
   -moz-box-align: start;