diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index ab753117c9e316..9ed3cad668b0c4 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -129,6 +129,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -144,6 +145,20 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index 3a8c00737c036d..c0ff2f8b580e6d 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -118,6 +118,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -133,6 +134,20 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
index 4ec97e97eafed3..a0c402f8b187b6 100644
--- a/docs/src/createEmotionCache.ts
+++ b/docs/src/createEmotionCache.ts
@@ -8,8 +8,8 @@ function globalSelector(element: Element) {
   switch (element.type) {
     case RULESET:
       element.props = (element.props as string[]).map((value: any) => {
-        if (value.match(/(:where|:has)\(/)) {
-          value = value.replace(/\.[^:]+(:where|:has)/, '$1');
+        if (value.match(/(:where|:is)\(/)) {
+          value = value.replace(/\.[^:]+(:where|:is)/, '$1');
           return value;
         }
         return value;