diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index b4a9609711c..31fccd573f2 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -122,5 +122,10 @@
   }
 }
 
+calcite-time-picker {
+  --calcite-time-picker-border-color: transparent;
+  --calcite-time-picker-corner-radius: var(--calcite-corner-radius-round);
+}
+
 @include form-validation-message();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 41c454673e6..b68fbbc0255 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -681,12 +681,14 @@ export class InputTimePicker
           focusTrapOptions={{ initialFocus: false }}
           label={messages.chooseTime}
           lang={this.messages._lang}
+          offsetDistance={0}
           oncalcitePopoverBeforeClose={this.popoverBeforeCloseHandler}
           oncalcitePopoverBeforeOpen={this.popoverBeforeOpenHandler}
           oncalcitePopoverClose={this.popoverCloseHandler}
           oncalcitePopoverOpen={this.popoverOpenHandler}
           overlayPositioning={this.overlayPositioning}
           placement={this.placement}
+          pointer-disabled={true}
           ref={this.setCalcitePopoverEl}
           referenceElement={this.containerEl}
           triggerDisabled={true}
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
index 5608a56a2dd..ab2d017ab99 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
+++ b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
@@ -1489,6 +1489,10 @@ describe("calcite-time-picker", () => {
           state: "hover",
           shadowSelector: `.${CSS.input}`,
         },
+        "--calcite-time-picker-border-color": {
+          targetProp: "borderColor",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
       });
     });
 
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
index 2e763ce786a..711dd47b93b 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.scss
+++ b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -4,6 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-time-picker-background-color: Specifies the background color of the time picker.
+ * @prop --calcite-time-picker-border-color: Specifies the border color of the time picker.
  * @prop --calcite-time-picker-corner-radius: Specifies the border radius of the time picker.
  * @prop --calcite-time-picker-button-background-color-hover: Specifies the button's background color when hovered or focused.
  * @prop --calcite-time-picker-button-background-color-press: Specifies the button's background color when active.
@@ -19,11 +20,12 @@
 
 .time-picker {
   @apply flex
-    shadow-2
     select-none
     items-center
+    border-solid
+    border
     font-medium;
-
+  border-color: var(--calcite-time-picker-border-color, var(--calcite-color-border-3));
   border-radius: var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));
   color: var(--calcite-time-picker-color, var(--calcite-color-text-1));
   background-color: var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));
diff --git a/packages/calcite-components/src/custom-theme/time-picker.ts b/packages/calcite-components/src/custom-theme/time-picker.ts
index b94538e7453..44b79b39713 100644
--- a/packages/calcite-components/src/custom-theme/time-picker.ts
+++ b/packages/calcite-components/src/custom-theme/time-picker.ts
@@ -9,6 +9,7 @@ export const timePickerTokens = {
   calciteTimePickerIconColor: "",
   calciteTimePickerInputBorderColorPress: "",
   calciteTimePickerInputBorderColorHover: "",
+  calciteTimePickerBorderColor: "",
 };
 
 export const timePicker = html`<calcite-time-picker></calcite-time-picker>`;