Vuetify.js: <v-text-field> round corners

Question

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.

Answer 1

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

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