How can I change a text input filed's border color dynamicaly over blazor serv app markup code without overlapping with the "on focus" border color?

I have a Blazor server side app where I am controlling the users text input in a razor page whether it is in correct format dynamicaly when the user is typing the text into the input field.

If the user has entered an correct format of string, then the border color of the text input field is changed to green, otherwise it is changed to red. If the user just selects the input field without typing anything, then the "on focus" border color should as defined in default (grey for example).

Normaly it is working fine with my code. But the only problem is that the input field has in default a border color when it is selected (focus). So the colors defined by my code are overlapping with the default color of the "focus border color" of the input field when the user is typing anything.

I have tried to change dynamicaly also the focus border color of the text input but I don't know how to acces to the "focus border color" property of the input field. I have tried to do with CSS but I don't know how I can change color value in the css with markup code. My current code is:

 <td > <input type="text" style="border-color: @border_color" @bind="PLC_VAR_name" @bind:event="oninput" @onkeyup=@(e => check_PLC_VAR_name(e)) /></td>

protected async Task check_PLC_VAR_name(KeyboardEventArgs e)
{
    //Code for defining  border_color if format ok = "green", if not ok "red"
}