How to get rounded corners for <v-text-field> in Vuetify?

<v-flex xs12>
    <v-text-field  style="border-radius:50px"
        label="Text field"
        solo
    ></v-text-field>
</v-flex>

I tried border-radius property for bother the container <v-flex> and <v-text-field> itself but it did not work.

Codepen.

How to get rounded corners for <v-text-field> in Vuetify?

<v-flex xs12>
    <v-text-field  style="border-radius:50px"
        label="Text field"
        solo
    ></v-text-field>
</v-flex>

I tried border-radius property for bother the container <v-flex> and <v-text-field> itself but it did not work.

Codepen.

• javascript
• css
• vuetify.js

5 Answers 5

You can add the rounded property to a v-text-field (vuetify docs)

<v-text-field
  label="Text field"
  solo
  rounded
></v-text-field>

Whenever I need to change Vuetify styles I add a class to a containing element and then add your styles. Working with Vuetify (like any framework) can be frustrating due to specificity. In this case you need at least level 3 specificity.

template

<v-text-field
  label="Text field"
  solo
  class="my-input"
></v-text-field>

css

.my-input.v-input .v-input__slot {
  border-radius: 100px;
}

for vuetify 3 this didn't worked for me, so i used this css selector that i took from the dom .v-text-field ::v-deep(.v-field) { border-radius: 8px; } hope this helps for vuetify 3

For vuetify 3 you can add rounded and pass a size (i.e., sm, md, lg, etc)

<v-text-field
  rounded="lg"
  solo
></v-text-field>

You can do this:

<v-text-field
  label="Text field"
  solo
  class="rounded-lg"
></v-text-field>

You can add these classes to control the border radius:

• rounded-sm
• rounded
• rounded-lg
• rounded-xl
• rounded-0

I use 'rounded-0' a lot to remove pesky border radius in components like v-text-field.

Full documentation here.