diff --git a/ui/frontend/Playground.module.css b/ui/frontend/Playground.module.css
index 618c8d40..fb32358e 100644
--- a/ui/frontend/Playground.module.css
+++ b/ui/frontend/Playground.module.css
@@ -43,7 +43,27 @@
 
 .splitRowsGutterHandle {
   transform: rotate(90deg);
+}
+
+.splitColumnsGutterHandle, .splitRowsGutterHandle {
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.splitColumnsGutterHandle::before, .splitRowsGutterHandle::before {
+  content: "";
+  width: 2px;
+  height: 12px;
+  border-left: dotted 2px currentColor;
+}
+
+.splitColumnsGutterHandle::after, .splitRowsGutterHandle::after {
+  content: "";
+  width: 2px;
+  height: 16px;
+  border-right: dotted 2px currentColor;
 }
 
 .splitColumnsGutter {
diff --git a/ui/frontend/Playground.tsx b/ui/frontend/Playground.tsx
index 3454713d..106b53ff 100644
--- a/ui/frontend/Playground.tsx
+++ b/ui/frontend/Playground.tsx
@@ -28,7 +28,7 @@ const UNFOCUSED_GRID_STYLE = {
 
 const HANDLE_STYLES = {
   [Orientation.Horizontal]: [styles.splitRowsGutter, styles.splitRowsGutterHandle],
-  [Orientation.Vertical]: [styles.splitColumnsGutter, ''],
+  [Orientation.Vertical]: [styles.splitColumnsGutter, styles.splitColumnsGutterHandle],
 }
 
 // We drop down to lower-level split-grid code and use some hooks
@@ -72,7 +72,7 @@ const ResizableArea: React.FC = () => {
       <div className={styles.editor}><Editor /></div>
       { isFocused &&
         <div ref={dragHandle} className={handleOuterStyle}>
-          <span className={handleInnerStyle}>⣿</span>
+          <span className={handleInnerStyle}></span>
         </div>
       }
       { somethingToShow && <div className={styles.output}><Output /></div>}