diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
index b1369d8174a..fc7c1575839 100644
--- a/apps/design-system/content/docs/components/button.mdx
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -125,17 +125,18 @@ Supports slot behavior with `asChild` prop.
Pair a button with a chevron `DropdownMenu` trigger when there are variations of the same action, or alternative ways to accomplish the same goal. The default or most likely option should be used on the exposed button.
-When secondary actions are related but distinct—not alternatives to the primary action—display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions).
+When secondary actions are related but distinct (not alternatives to the primary action) display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions).
-The shared middle border is the tricky part. Do **not** use `border-l-0` on the chevron button — that drops the divider on hover/focus. Instead:
+Ensure the middle border is shared rather than doubled-up. Do not use `border-l-0` on the chevron button as that drops the divider on hover/focus. Instead:
-- Primary: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover.
+- Primary action: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover.
- Chevron trigger: `rounded-l-none`, `shrink-0`, `px-[4px] py-[5px]`, and `-ml-px` to overlap the adjacent border by one pixel.
+- Both: `focus-visible:z-10` so the focus ring stacks above the neighbour, and `focus-visible:rounded-r-sm` / `focus-visible:rounded-l-sm` so the squared-off edge is slightly rounded while the ring is shown.
- Chevron trigger only: `aria-label` describing the menu (the icon is decorative).
-Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions, also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary when `layout="responsive"`.
+Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions when `layout="responsive"`: also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary action.
## Accessibility
diff --git a/apps/design-system/registry/default/example/admonition-button-split.tsx b/apps/design-system/registry/default/example/admonition-button-split.tsx
index edd0ef32a74..0300ac430f7 100644
--- a/apps/design-system/registry/default/example/admonition-button-split.tsx
+++ b/apps/design-system/registry/default/example/admonition-button-split.tsx
@@ -20,7 +20,7 @@ export default function AdmonitionButtonSplitDemo() {
@@ -30,7 +30,7 @@ export default function AdmonitionButtonSplitDemo() {
type="button"
variant="default"
aria-label="More email template editing options"
- className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
+ className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
icon={}
/>
diff --git a/apps/design-system/registry/default/example/button-split-dropdown.tsx b/apps/design-system/registry/default/example/button-split-dropdown.tsx
index 885e1bbebaa..54a1c621c72 100644
--- a/apps/design-system/registry/default/example/button-split-dropdown.tsx
+++ b/apps/design-system/registry/default/example/button-split-dropdown.tsx
@@ -11,7 +11,11 @@ import {
export default function ButtonSplitDropdownDemo() {
return (