Shopify Inbox mobile chat notification badge is cut off with border-radius

Ask & Offer

Topic summary

Mobile issue with the Shopify Inbox chat widget: applying rounded corners (border-radius: 16px) on mobile causes the red notification badge (e.g., “1”) to be clipped.

CSS details: within @media (max-width: 820px), both inbox-online-store-chat and its iframe get border-radius and overflow: hidden. Removing overflow: hidden restores the badge but removes the rounded corners.

Technical context: overflow: hidden clips elements extending beyond the container; the mobile widget appears inside an iframe, which isolates styles and prevents direct CSS changes to the badge. Adjusting z-index on the badge is not feasible due to iframe isolation.

Evidence: a screenshot from the inspector was attached; the clipping is more apparent on a real device.

Access provided for review: Store sawez.be, password “abc”.

Status: no solution identified yet; user is seeking suggestions to preserve rounded corners without clipping the badge (open/ongoing).

Summarized with AI on December 29. AI used: gpt-5.
1

Hi,

I have an issue with the Shopify Inbox chat widget on mobile.

When I add rounded corners to the chat widget using CSS, the red notification badge with the number 1 gets cut off. This only happens on mobile. On desktop there is no problem.

This is the CSS that causes it:

@media (max-width: 820px) {
inbox-online-store-chat iframe,
inbox-online-store-chat {
border-radius: 16px !important;
overflow: hidden;
}
}

If I remove overflow: hidden, the badge shows correctly, but then the rounded corners stop working.

I tried targeting the badge itself and changing z-index, but it does not seem possible to style it directly. It looks like the mobile chat uses an iframe and clips the badge.

I attached a screenshot from inspecting the element, but on an actual mobile device it looks more clear that is is cut off.

I would really appreciate any help or ideas on how to solve this.

Thanks in advance.

shopify help mobile
shopify help mobile548Ă—1009 124 KB

Store: sawez.be

store pass: abc

2

@sawez try adding the following Custom CSS

inbox-online-store-chat {
    overflow: unset !important;
}
3

Unfortunately, it’s either rounded corners and overflow:hidden or protruding elements visible.

Of course your code only applies on mobile since you have the media query @media (max-width:820px). Though 820px is an unusual number.

Also – you can’t directly apply CSS rules to inbox-online-store-chat children because they are in Shadow DOM and CSS rules in your main document do not apply to them.

However – what is your goal?
Let’s solve your initial problem, not fix the wrong solution.

If your goal is to have round corners on the open dialog window, then let’s target open dialog window like this:

@media (max-width: 820px) {
  inbox-online-store-chat[is-open="true"] {
    border-radius: 16px;
    overflow: hidden;
  }
}

(your code would need to be removed)

This way you do not have overflow: hidden on your chat button, so notification badge should be visible, but open chat window will have rounded corners.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
1 Like
4

Hi @StackingContext , thanks for the reply however that doesnt work unfortunately.

5

Hi Tim, yes this was exactly what I wanted!

When I open the chat it should have rounded corners, without a part of the notification badge being cut off when chat is unopened.

Amazing! thanks a lot!

1 Like