Vaadin Focus Color

That border is the "focus ring" (it's an accessibility feature that indicates that the field has received focus from a keyboard interaction, but it won't display when focusing the field by using the mouse).

How the focus-ring is styled, depends on each component and theme.

For instance, the focus-ring of TextField in Lumo is a CSS box-shadow in the input-field part:

:host([focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}

:host([invalid][focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}

A handy way to find those styles is inspecting the <style> tag in the component's shadow DOM

You can override the focus-ring of vaadin-text-field with

:host([focus-ring]) [part="input-field"] {
  box-shadow: none !important
}

Then, you import the stylesheet with a @CssImport with themeFor="vaadin-text-field" or by means of registerStyles.