diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 9aab71160e..dd357ac562 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <WidgetLayoutField :widget>
+  <WidgetLayoutField v-slot="{ borderStyle }" :widget :no-border="!hasLabels">
     <!-- Use ToggleGroup when explicit labels are provided -->
     <ToggleGroup
       v-if="hasLabels"
@@ -25,7 +25,13 @@
     <!-- Use ToggleSwitch for implicit boolean states -->
     <div
       v-else
-      :class="cn('flex w-fit items-center gap-2', hideLayoutField || 'ml-auto')"
+      :class="
+        cn(
+          '-m-1 flex w-fit items-center gap-2 rounded-full p-1',
+          hideLayoutField || 'ml-auto',
+          borderStyle
+        )
+      "
     >
       <ToggleSwitch
         v-model="modelValue"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 2c83da03b3..f399f7a4f1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,17 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-const { rootClass } = defineProps<{
+const { widget, rootClass } = defineProps<{
   widget: Pick<
     SimplifiedWidget<string | number | undefined>,
     'name' | 'label' | 'borderStyle'
   >
   rootClass?: string
+  noBorder?: boolean
 }>()
 
 const hideLayoutField = useHideLayoutField()
+const borderStyle = computed(() =>
+  cn(
+    'focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
+    widget.borderStyle
+  )
+)
 </script>
 
 <template>
@@ -33,15 +42,15 @@ const hideLayoutField = useHideLayoutField()
       <div
         :class="
           cn(
-            'min-w-0 cursor-default rounded-lg transition-all has-focus-visible:ring has-focus-visible:ring-component-node-widget-background-highlighted',
-            widget.borderStyle
+            'min-w-0 cursor-default rounded-lg transition-all',
+            !noBorder && borderStyle
           )
         "
         @pointerdown.stop
         @pointermove.stop
         @pointerup.stop
       >
-        <slot />
+        <slot :border-style />
       </div>
     </div>
   </div>