diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 7e3b8cfdb2..5a084ab3c4 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -391,8 +391,8 @@ export default {
 		&:active:not([disabled]),
 		&:hover:not([disabled]),
 		&:focus:not([disabled]) {
+			border-color: var(--color-main-text);
 			border-width: var(--border-width-input-focused, 2px);
-			border-color: var(--color-main-text) !important;
 			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 			// Reset padding offset when focused
 			--input-border-width-offset: 0px;
@@ -422,7 +422,8 @@ export default {
 			}
 		}
 
-		&--error {
+		&--error,
+		&:invalid {
 			border-color: var(--color-error) !important; //Override hover border color
 			&:focus-visible {
 				box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px