diff --git a/packages/gestalt-datepicker/src/DateRange.css b/packages/gestalt-datepicker/src/DateRange.css
index 8bed243026..a251bfa0bf 100644
--- a/packages/gestalt-datepicker/src/DateRange.css
+++ b/packages/gestalt-datepicker/src/DateRange.css
@@ -14,6 +14,11 @@ html[dir="rtl"] .borderRight {
   position: relative;
 }
 
+.dateFieldSection:first-child {
+  border-top-left-radius: var(--rounding-400);
+  border-top-right-radius: var(--rounding-400);
+}
+
 .dateFieldSectionActive {
   background-color: var(--color-gray-roboflow-100);
 }
diff --git a/packages/gestalt-datepicker/src/DateRange.tsx b/packages/gestalt-datepicker/src/DateRange.tsx
index 39dcea2dc6..c1e9c3de01 100644
--- a/packages/gestalt-datepicker/src/DateRange.tsx
+++ b/packages/gestalt-datepicker/src/DateRange.tsx
@@ -238,14 +238,7 @@ function DateRange({
   });
 
   return (
-    <Box
-      borderStyle="shadow"
-      color="default"
-      display="inlineBlock"
-      minHeight={425}
-      overflow="hidden"
-      rounding={4}
-    >
+    <Box borderStyle="shadow" color="default" display="inlineBlock" minHeight={425} rounding={4}>
       <Flex>
         {radioGroup &&
         // @ts-expect-error - TS2339