diff --git a/modules/Bar.qml b/modules/Bar.qml
index 680c205..c72c4d9 100644
--- a/modules/Bar.qml
+++ b/modules/Bar.qml
@@ -27,31 +27,38 @@ PanelWindow {
         opacity: M.Theme.barOpacity
     }
 
-    Item {
+    Canvas {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        height: 3
-        clip: true
+        height: Math.max(M.Theme.screenRadius + 2, 4)
 
-        Rectangle {
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: M.Theme.screenRadius > 0 ? M.Theme.screenRadius * 2 : 3
-            topLeftRadius: M.Theme.screenRadius
-            topRightRadius: M.Theme.screenRadius
-            gradient: Gradient {
-                orientation: Gradient.Horizontal
-                GradientStop {
-                    position: 0
-                    color: M.Theme.base0C
-                }
-                GradientStop {
-                    position: 1
-                    color: M.Theme.base09
-                }
+        onPaint: {
+            const ctx = getContext("2d");
+            const w = width;
+            const r = M.Theme.screenRadius;
+            const lw = 3;
+            const hw = lw / 2;
+
+            ctx.clearRect(0, 0, w, height);
+
+            const grad = ctx.createLinearGradient(0, 0, w, 0);
+            grad.addColorStop(0, M.Theme.base0C.toString());
+            grad.addColorStop(1, M.Theme.base09.toString());
+            ctx.strokeStyle = grad;
+            ctx.lineWidth = lw;
+
+            ctx.beginPath();
+            if (r > lw) {
+                ctx.moveTo(0, r);
+                ctx.arc(r, r, r - hw, Math.PI, -Math.PI / 2);
+                ctx.lineTo(w - r, hw);
+                ctx.arc(w - r, r, r - hw, -Math.PI / 2, 0);
+            } else {
+                ctx.moveTo(0, hw);
+                ctx.lineTo(w, hw);
             }
+            ctx.stroke();
         }
     }