diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 62272a2e..bcc59d50 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -36,9 +36,16 @@ export const UserAvatarContainer = style({
   top: 0,
   transform: 'translateY(-50%)',
   backgroundColor: color.Surface.Container,
+  // Surface plate that punches through the cover banner — sits one DOM level
+  // above the folds `<Avatar>`, so the global circle override on `.UserAvatar`
+  // (commit ead1290) does not reach it. Round it explicitly to match.
+  borderRadius: '50%',
 });
 export const UserHeroAvatar = style({
-  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+  // boxShadow rather than outline — `outline` ignores `border-radius`, so it
+  // would draw a square ring around the circular avatar (the global circle
+  // override lives in `user-avatar/UserAvatar.css.ts` since commit ead1290).
+  boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Surface.Container}`,
   selectors: {
     'button&': {
       cursor: 'pointer',