diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index bb4dc6a68f..d40efc178b 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -27,7 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
 
 $selected-message-border-width: 4px;
 
-$timeline-image-border-radius: 8px;
 :root {
     font-size: 10px;
 
@@ -37,6 +36,7 @@ $timeline-image-border-radius: 8px;
     --transition-standard: 0.3s;
     --buttons-dialog-gap-row: $spacing-8;
     --buttons-dialog-gap-column: $spacing-8;
+    --MBody-border-radius: 8px;
 }
 
 @media only percy {
diff --git a/res/css/components/views/messages/_MBeaconBody.pcss b/res/css/components/views/messages/_MBeaconBody.pcss
index 26f3653a84..82544addae 100644
--- a/res/css/components/views/messages/_MBeaconBody.pcss
+++ b/res/css/components/views/messages/_MBeaconBody.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     max-width: 325px;
     width: 100%;
 
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
     overflow: hidden;
 }
 
diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss
index 75f9028375..e0b96f3578 100644
--- a/res/css/views/messages/_MImageBody.pcss
+++ b/res/css/views/messages/_MImageBody.pcss
@@ -15,14 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$timeline-image-border-radius: 8px;
-
 .mx_MImageBody_banner {
     position: absolute;
     bottom: $spacing-4;
     left: $spacing-4;
     padding: $spacing-4;
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
     font-size: $font-15px;
     user-select: none; /* prevent banner text from being selected */
     pointer-events: none; /* let the cursor go through to the media underneath */
@@ -55,7 +53,7 @@ $timeline-image-border-radius: 8px;
 }
 
 .mx_MImageBody_thumbnail_container {
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
 
     /* Necessary for the border radius to apply correctly to the placeholder */
     overflow: hidden;
diff --git a/res/css/views/messages/_MLocationBody.pcss b/res/css/views/messages/_MLocationBody.pcss
index 0692a0c1e9..27d328ee6a 100644
--- a/res/css/views/messages/_MLocationBody.pcss
+++ b/res/css/views/messages/_MLocationBody.pcss
@@ -23,7 +23,7 @@ limitations under the License.
         height: 300px;
         z-index: 0; /* keeps the entire map under the message action bar */
 
-        border-radius: $timeline-image-border-radius;
+        border-radius: var(--MBody-border-radius);
         cursor: pointer;
     }
 }
diff --git a/res/css/views/messages/_MVideoBody.pcss b/res/css/views/messages/_MVideoBody.pcss
index b4cd545bf0..94ef39eb1f 100644
--- a/res/css/views/messages/_MVideoBody.pcss
+++ b/res/css/views/messages/_MVideoBody.pcss
@@ -18,7 +18,7 @@ span.mx_MVideoBody {
     overflow: hidden;
 
     .mx_MVideoBody_container {
-        border-radius: $timeline-image-border-radius;
+        border-radius: var(--MBody-border-radius);
         overflow: hidden;
 
         video {
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index c525e5b912..4fce09f937 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -290,7 +290,7 @@ limitations under the License.
             /* we put the timestamps for media (other than stickers) atop the media */
             &.mx_EventTile_image {
                 .mx_MessageTimestamp {
-                    border-radius: $timeline-image-border-radius;
+                    border-radius: var(--MBody-border-radius);
                     /* Hardcoded colours because it's the same on all themes */
                     background-color: rgba(0, 0, 0, 0.6);
                     color: #ffffff;