diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 17033f922c7..4b5a6757195 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -92,6 +92,10 @@ limitations under the License.
     &[data-self=false] {
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
+
+            .mx_MImageBody .mx_MImageBody_thumbnail {
+                border-bottom-right-radius: var(--cornerRadius);
+            }
         }
         .mx_EventTile_avatar {
             left: -34px;
@@ -106,12 +110,16 @@ limitations under the License.
     }
     &[data-self=true] {
         .mx_EventTile_line {
-            border-bottom-left-radius: var(--cornerRadius);
             float: right;
+            border-bottom-left-radius: var(--cornerRadius);
             > a {
                 left: auto;
                 right: -68px;
             }
+
+            .mx_MImageBody .mx_MImageBody_thumbnail {
+                border-bottom-left-radius: var(--cornerRadius);
+            }
         }
 
         .mx_ThreadInfo {
@@ -147,33 +155,62 @@ limitations under the License.
 
     .mx_EventTile_line {
         position: relative;
-        padding: var(--gutterSize);
-        border-top-left-radius: var(--cornerRadius);
-        border-top-right-radius: var(--cornerRadius);
-        background: var(--backgroundColor);
         display: flex;
         gap: 5px;
         margin: 0 -12px 0 -9px;
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
         > a {
             position: absolute;
             padding: 10px 20px;
             top: 0;
             left: -68px;
         }
+
+        //noinspection CssReplaceWithShorthandSafely
+        .mx_MImageBody .mx_MImageBody_thumbnail {
+            // Note: This is intentionally not compressed because the browser gets confused
+            // when it is all combined. We're effectively unsetting the border radius then
+            // setting the two corners we care about manually.
+            border-radius: unset;
+            border-top-left-radius: var(--cornerRadius);
+            border-top-right-radius: var(--cornerRadius);
+        }
+    }
+
+    .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
+        padding: var(--gutterSize);
+        background: var(--backgroundColor);
     }
 
     &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
         border-top-left-radius: 0;
+
+        .mx_MImageBody .mx_MImageBody_thumbnail {
+            border-top-left-radius: 0;
+        }
     }
     &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
         border-bottom-left-radius: var(--cornerRadius);
+
+        .mx_MImageBody .mx_MImageBody_thumbnail {
+            border-bottom-left-radius: var(--cornerRadius);
+        }
     }
 
     &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
         border-top-right-radius: 0;
+
+        .mx_MImageBody .mx_MImageBody_thumbnail {
+            border-top-right-radius: 0;
+        }
     }
     &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
         border-bottom-right-radius: var(--cornerRadius);
+
+        .mx_MImageBody .mx_MImageBody_thumbnail {
+            border-bottom-right-radius: var(--cornerRadius);
+        }
     }
 
     .mx_EventTile_avatar {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8f9915132e8..30091ea8a27 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -63,6 +63,7 @@ import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewSto
 
 import { logger } from "matrix-js-sdk/src/logger";
 import { TimelineRenderingType } from "../../../contexts/RoomContext";
+import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -994,6 +995,12 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         const EventTileType = sdk.getComponent(tileHandler);
+        const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
+
+        const lineClasses = classNames({
+            mx_EventTile_line: true,
+            mx_EventTile_mediaLine: isProbablyMedia,
+        });
 
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
         const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
@@ -1209,7 +1216,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { timestamp }
                         </a>
                     </div>,
-                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                    <div className={lineClasses} key="mx_EventTile_line">
                         <EventTileType ref={this.tile}
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
@@ -1257,7 +1264,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { timestamp }
                         </a>
                     </div>,
-                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                    <div className={lineClasses} key="mx_EventTile_line">
                         { replyChain }
                         <EventTileType ref={this.tile}
                             mxEvent={this.props.mxEvent}
@@ -1281,7 +1288,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                     "aria-atomic": true,
                     "data-scroll-tokens": scrollToken,
                 }, [
-                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                    <div className={lineClasses} key="mx_EventTile_line">
                         <EventTileType ref={this.tile}
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
@@ -1341,7 +1348,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { sender }
                         { ircPadlock }
                         { avatar }
-                        <div className="mx_EventTile_line" key="mx_EventTile_line">
+                        <div className={lineClasses} key="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
                             { replyChain }