How to change outline color v-text-field vuetify.js

You can override the default style using deep selector. The original css is on the fieldset element, so you need to target that aswell.

<style scoped>
.v-text-field--outlined >>> fieldset {
  border-color: rgba(192, 0, 250, 0.986);
}
</style>

You can use color attribute like following:

<v-text-field
   label="Your landing page"
    hint="www.example.com/page"
    persistent-hint
    outlined
    color="red"
></v-text-field>

If you are using SASS variables, customize the light theme like this:

// Your custom main.scss

$material-light: (
  'text-fields': (
    'outlined': rgba(0,0,0, 0.19),
  ),
);

You can overwrite all variables in @vuetify/src/styles/settings/_light.scss like that.

Thanks Mohammad Hosseini, this is the only RIGHT ANSWER

.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
> .v-input__control
> .v-input__slot
fieldset {
color: rgba(169, 169, 169, 0.33);}

.v-application .transparent {  
     border-color: black !important;
}

Try this.

You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:

.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
    > .v-input__control
    > .v-input__slot
    fieldset {
    color: rgba(169, 169, 169, 0.33);
  }