diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index a45fe50433b..cd3a2c843a9 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -52,6 +52,10 @@
   @apply focus-base w-auto;
 }
 
+.container {
+  @apply rounded-full;
+}
+
 .track {
   @apply bg-foreground-2
     border-color-2
diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index ec993a493de..0fbbe3843e5 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -35,3 +35,20 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const disabled_TestOnly = (): string => html`<calcite-switch disabled checked></calcite-switch>`;
+
+export const Focus_TestOnly = (): string =>
+  html`
+    <div style="width:300px;height:300px; padding: 20px">
+      <calcite-switch> </calcite-switch>
+    </div>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-switch");
+        await document.querySelector("calcite-switch").setFocus();
+      })();
+    </script>
+  `;
+
+Focus_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};