diff --git a/src/image.css.ts b/src/image.css.ts
index aec33a15fc..2cc69c19b2 100644
--- a/src/image.css.ts
+++ b/src/image.css.ts
@@ -31,7 +31,7 @@ export const image = style([
     },
 ]);
 
-export const noBorderRadius = style({
+export const withoutBorderRadius = style({
     borderRadius: 0,
 });
 
@@ -39,6 +39,10 @@ export const circularBorderRadius = style({
     borderRadius: '50%',
 });
 
+export const withBorderRadius = style({
+    borderRadius: skinVars.borderRadii.container,
+});
+
 export const defaultBorderRadius = style({
     borderRadius: fallbackVar(mediaBorderRadius, skinVars.borderRadii.container),
 });
diff --git a/src/image.tsx b/src/image.tsx
index c87bf9993f..3be3724f98 100644
--- a/src/image.tsx
+++ b/src/image.tsx
@@ -170,8 +170,10 @@ export const ImageContent = React.forwardRef<HTMLImageElement, ImageProps>(
         const borderRadiusStyle = props.circular
             ? styles.circularBorderRadius
             : noBorderRadius
-              ? styles.noBorderRadius
-              : styles.defaultBorderRadius;
+              ? styles.withoutBorderRadius
+              : noBorderRadius === false // explicitly set to false, so we set border radius
+                ? styles.withBorderRadius
+                : styles.defaultBorderRadius; // === undefined, use the default border radius (or the setting set by parent component, like cards or slideshow)
 
         const [isError, setIsError] = React.useState(!src);
         const [hideLoadingFallback, setHideLoadingFallback] = React.useState(false);