diff --git a/docs/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
index 2675d14a2208f3..819eeb086c5667 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.js
+++ b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx b/docs/src/pages/components/masonry/BasicMasonry.tsx
index 2675d14a2208f3..819eeb086c5667 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.tsx
+++ b/docs/src/pages/components/masonry/BasicMasonry.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedColumns.js b/docs/src/pages/components/masonry/FixedColumns.js
index 035bef3061f56b..98c5e946e660a0 100644
--- a/docs/src/pages/components/masonry/FixedColumns.js
+++ b/docs/src/pages/components/masonry/FixedColumns.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedColumns.tsx b/docs/src/pages/components/masonry/FixedColumns.tsx
index 035bef3061f56b..98c5e946e660a0 100644
--- a/docs/src/pages/components/masonry/FixedColumns.tsx
+++ b/docs/src/pages/components/masonry/FixedColumns.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedSpacing.js b/docs/src/pages/components/masonry/FixedSpacing.js
index fe5afc26f34ea5..d9433e24b972a6 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.js
+++ b/docs/src/pages/components/masonry/FixedSpacing.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedSpacing.tsx b/docs/src/pages/components/masonry/FixedSpacing.tsx
index fe5afc26f34ea5..d9433e24b972a6 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.tsx
+++ b/docs/src/pages/components/masonry/FixedSpacing.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ImageMasonry.js b/docs/src/pages/components/masonry/ImageMasonry.js
index 3f370aae552285..bb16bb7cafd629 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.js
+++ b/docs/src/pages/components/masonry/ImageMasonry.js
@@ -8,6 +8,9 @@ import { styled } from '@mui/material/styles';
 const Label = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -25,6 +28,7 @@ export default function ImageMasonry() {
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
               alt={item.title}
               loading="lazy"
+              style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
             />
           </Stack>
         ))}
diff --git a/docs/src/pages/components/masonry/ImageMasonry.tsx b/docs/src/pages/components/masonry/ImageMasonry.tsx
index 3f370aae552285..bb16bb7cafd629 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.tsx
+++ b/docs/src/pages/components/masonry/ImageMasonry.tsx
@@ -8,6 +8,9 @@ import { styled } from '@mui/material/styles';
 const Label = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -25,6 +28,7 @@ export default function ImageMasonry() {
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
               alt={item.title}
               loading="lazy"
+              style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
             />
           </Stack>
         ))}
diff --git a/docs/src/pages/components/masonry/ImageMasonry.tsx.preview b/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
index b8e3e3f5301fd4..22ee46c02ebaf9 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
+++ b/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
@@ -7,6 +7,7 @@
         srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
         alt={item.title}
         loading="lazy"
+        style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
       />
     </Stack>
   ))}
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.js b/docs/src/pages/components/masonry/ResponsiveColumns.js
index 21ec0e2d1d973a..81efcc48d85cb4 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.js
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.tsx b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
index 21ec0e2d1d973a..81efcc48d85cb4 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.js b/docs/src/pages/components/masonry/ResponsiveSpacing.js
index f35ba5e5d2d4f0..01ff73bd374359 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.js
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
index f35ba5e5d2d4f0..01ff73bd374359 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/SSRMasonry.js b/docs/src/pages/components/masonry/SSRMasonry.js
index 3cce72dace6405..3089ce899aefee 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.js
+++ b/docs/src/pages/components/masonry/SSRMasonry.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/SSRMasonry.tsx b/docs/src/pages/components/masonry/SSRMasonry.tsx
index 3cce72dace6405..3089ce899aefee 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.tsx
+++ b/docs/src/pages/components/masonry/SSRMasonry.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',