Box and IconButton create clipPath issue or cause anti aliasing artifacts

[williamtober]

Steps to reproduce

Steps:

1. Example CodeSandbox
2. Place Box anywhere with a border radius and a background color...
3. Have an element who's border radius would cause an overflow outside of the Box's borderRadius... borderRadius: 0
4. Set the Box to overflow: 'clip' OR overflow: 'hidden'... it doesn't matter it still does the same thing..
5. At the bottom right and top right corners of the Box element... we should now see the background of the Box element... where it should be showing the backgroundColor of our IconButton... it slightly leaks out... like we're talking single digit pixels

Current behavior

Box's background color leaks out near edges of borderRadius when overflow is set to clip or hidden even when the element at the clip position is passing the clip path with a different background color.

Expected behavior

Box's background color should not be visible at the edges of borderRadius when overflow is set to clip or hidden and the backgroundColor of the child element underneath the clip path should show...

Context

I want the box component's border radius to not ignore the elements rendered when overflow is set to clip or hidden. The the clip path margin should be set towards the content... as far as I understand... I'm always open to being wrong 😄

Your environment

npx @mui/envinfo

System:
    OS: macOS 15.2
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.14.2 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Not Found
    Safari: 18.2
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/icons-material: ^6.0.1 => 6.0.1 
    @mui/material: ^6.0.1 => 6.0.1 
    @mui/private-theming:  6.0.1 
    @mui/styled-engine:  6.0.1 
    @mui/styled-engine-sc: ^6.0.2 => 6.0.2 
    @mui/system:  6.0.1 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.1 
    @mui/x-data-grid: ^7.21.0 => 7.21.0 
    @mui/x-date-pickers: ^7.16.0 => 7.16.0 
    @mui/x-internals:  7.16.0 
    @types/react: ^18.2.15 => 18.3.5 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    styled-components: ^6.1.13 => 6.1.13 
    typescript: ^5.0.2 => 5.5.4

I've been able to recreate this on Google Chrome, Safari, and Edge.

Search keywords: backgroundColor, borderRadius, overflow, artifact, clipPath, firstIssue

[mnajdova]

The box doesn't contain any styles by default, it should behave the same way as using a div. It just allows you to use theme tokens. CodeSadbox is acting up for me, but try to run this code and you will see there is no difference between using a native div and Box:

import * as React from "react";
import Box from "@mui/material/Box";

export default function IconButtons() {
  return (
    <>
      <Box
        sx={{ backgroundColor: "blue", borderRadius: "10px", overflow: "clip" }}
      >
        Parent
        <Box
          sx={{
            backgroundColor: "red",
            height: "50px",
            width: "50px",
          }}
        >
          Child
        </Box>
      </Box>
      <div
        style={{
          backgroundColor: "blue",
          borderRadius: "10px",
          overflow: "clip",
        }}
      >
        Parent
        <div
          style={{
            backgroundColor: "red",
            height: "50px",
            width: "50px",
          }}
        >
          Child
        </div>
      </div>
    </>
  );
}

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mnajdova]

If you see a difference in behavior between <Box /> and <div /> please let me know and I will re-open the issue.