diff --git a/.changeset/thin-dryers-worry.md b/.changeset/thin-dryers-worry.md
new file mode 100644
index 00000000..a4a6dd08
--- /dev/null
+++ b/.changeset/thin-dryers-worry.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/system': major
+---
+
+Use css `translate` to align handles to the center of their side instead of using hard-coded 4px to each direction, otherwise handles with different sizes aren't correctly aligned by the default handle styles
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index b28540de..9fed0d7b 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -183,26 +183,26 @@
   &-bottom {
     top: auto;
     left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
+    bottom: 0;
+    transform: translate(-50%, 50%);
   }
 
   &-top {
+    top: 0;
     left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -50%);
   }
 
   &-left {
     top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   &-right {
-    right: -4px;
     top: 50%;
-    transform: translate(0, -50%);
+    right: 0;
+    transform: translate(50%, -50%);
   }
 }