diff --git a/public/app/features/canvas/elements/cloud.tsx b/public/app/features/canvas/elements/cloud.tsx
index 1b9117d3409..c3f3b63f32d 100644
--- a/public/app/features/canvas/elements/cloud.tsx
+++ b/public/app/features/canvas/elements/cloud.tsx
@@ -53,9 +53,15 @@ const Cloud = (props: CanvasElementProps<CanvasElementConfig, CanvasElementData>
         />
         <path
           d="M 23 13 C -1 13 -7 33 12.2 37 C -7 45.8 14.6 65 30.2 57 C 41 73 77 73 89 57 C 113 57 113 41 98 33 C 113 17 89 1 68 9 C 53 -3 29 -3 23 13 Z"
-          className={styles.element}
           style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
         />
+
+        {/* Border */}
+        <path
+          d="M 23 13 C -1 13 -7 33 12.2 37 C -7 45.8 14.6 65 30.2 57 C 41 73 77 73 89 57 C 113 57 113 41 98 33 C 113 17 89 1 68 9 C 53 -3 29 -3 23 13 Z"
+          clipPath={`url(#cloudClip-${uniqueId})`}
+          className={styles.elementBorder}
+        />
       </svg>
       <span className={styles.text}>{data?.text}</span>
     </div>
@@ -199,9 +205,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
       fontSize: `${data?.size}px`,
       color: data?.color,
     }),
-    element: css({
-      stroke: data?.borderColor,
-      strokeWidth: data?.borderWidth,
+    elementBorder: css({
+      fill: 'none',
+      stroke: data?.borderColor ?? 'none',
+      strokeWidth: data?.borderWidth ?? 0,
+      strokeLinejoin: 'round',
     }),
   };
 };
diff --git a/public/app/features/canvas/elements/ellipse.tsx b/public/app/features/canvas/elements/ellipse.tsx
index c3e8cd3413d..41c1dc67767 100644
--- a/public/app/features/canvas/elements/ellipse.tsx
+++ b/public/app/features/canvas/elements/ellipse.tsx
@@ -56,9 +56,18 @@ const Ellipse = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDat
           cy="50%"
           rx="50%"
           ry="50%"
-          className={styles.element}
           style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
         />
+
+        {/* Border */}
+        <ellipse
+          cx="50%"
+          cy="50%"
+          rx="50%"
+          ry="50%"
+          clipPath={`url(#ellipseClip-${uniqueId})`}
+          className={styles.elementBorder}
+        />
       </svg>
 
       <span className={styles.text}>{data?.text}</span>
@@ -202,9 +211,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
       fontSize: `${data?.size}px`,
       color: data?.color,
     }),
-    element: css({
-      stroke: data?.borderColor,
-      strokeWidth: data?.borderWidth,
+    elementBorder: css({
+      fill: 'none',
+      stroke: data?.borderColor ?? 'none',
+      strokeWidth: data?.borderWidth ?? 0,
+      strokeLinejoin: 'round',
     }),
   };
 };
diff --git a/public/app/features/canvas/elements/parallelogram.tsx b/public/app/features/canvas/elements/parallelogram.tsx
index c02c081dc34..f442ad3db07 100644
--- a/public/app/features/canvas/elements/parallelogram.tsx
+++ b/public/app/features/canvas/elements/parallelogram.tsx
@@ -53,9 +53,15 @@ const Parallelogram = (props: CanvasElementProps<CanvasElementConfig, CanvasElem
         />
         <polygon
           points="0,150 50,0 250,0 200,150"
-          className={styles.element}
           style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
         />
+
+        {/* Border */}
+        <polygon
+          points="0,150 50,0 250,0 200,150"
+          clipPath={`url(#parallelogramClip-${uniqueId})`}
+          className={styles.elementBorder}
+        />
       </svg>
       <span className={styles.text}>{data?.text}</span>
     </div>
@@ -199,9 +205,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
       fontSize: `${data?.size}px`,
       color: data?.color,
     }),
-    element: css({
-      stroke: data?.borderColor,
-      strokeWidth: data?.borderWidth,
+    elementBorder: css({
+      fill: 'none',
+      stroke: data?.borderColor ?? 'none',
+      strokeWidth: data?.borderWidth ?? 0,
+      strokeLinejoin: 'round',
     }),
   };
 };
diff --git a/public/app/features/canvas/elements/triangle.tsx b/public/app/features/canvas/elements/triangle.tsx
index d146a1adec0..03743dece21 100644
--- a/public/app/features/canvas/elements/triangle.tsx
+++ b/public/app/features/canvas/elements/triangle.tsx
@@ -53,9 +53,15 @@ const Triangle = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDa
         />
         <polygon
           points="100,0 200,200 0,200"
-          className={styles.element}
           style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
         />
+
+        {/* Border */}
+        <polygon
+          points="100,0 200,200 0,200"
+          clipPath={`url(#triangleClip-${uniqueId})`}
+          className={styles.elementBorder}
+        />
       </svg>
 
       <span className={styles.text}>{data?.text}</span>
@@ -200,9 +206,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
       fontSize: `${data?.size}px`,
       color: data?.color,
     }),
-    element: css({
-      stroke: data?.borderColor,
-      strokeWidth: data?.borderWidth,
+    elementBorder: css({
+      fill: 'none',
+      stroke: data?.borderColor ?? 'none',
+      strokeWidth: data?.borderWidth ?? 0,
+      strokeLinejoin: 'round',
     }),
   };
 };