dual focus with voiceover turned on

If i try to focus the form elements like input field, the focus border comes up as per the css i wrote, but the same does not work with voice over turned on. Looks like voice over creates its own border along with default focus border of the element which creates a dual border. This happens mostly across all the components but more precisely in form elements.

without Voice over turned on:

with voice over turned on:

THIS HAS BECOME A BIG CONCERN AS A PRIORITY ISSUE. WOULD BE GREATFUL IF I RECIEVE SOME INSIGHTS ON IT. Is this how voice over works or is there any settings in voice-over utility which i can make use of stop this issue or is there anything which i need to write some code from my side??

My mac book configuration: