diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index bd452c589ad7..33d25abf3bde 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -6,7 +6,7 @@
 // color and opacity for states like hover, active, and focus. Additionally, adds styles to the
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
-@mixin mat-private-button-interactive() {
+@mixin mat-private-button-interactive($focus-indicator-inherits-shape: true) {
   -webkit-tap-highlight-color: transparent;
 
   // The ripple container should match the bounds of the entire button.
@@ -50,10 +50,18 @@
   // The focus indicator should match the bounds of the entire button.
   .mat-focus-indicator {
     @include layout-common.fill();
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 
   &:focus > .mat-focus-indicator::before {
     content: '';
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 }
 
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index 8da19ef2230e..327532994e5e 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -26,7 +26,8 @@
     transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
 
-  @include button-base.mat-private-button-interactive();
+  // Due to the shape of the FAB, inheriting the shape looks off. Disable it explicitly.
+  @include button-base.mat-private-button-interactive($focus-indicator-inherits-shape: false);
   @include style-private.private-animation-noop();
 
   &::before {