Vuetify.js: 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.

score 7 · Answer 1 · answered Jan 21 '20 at 11:36

7

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

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

answered Jan 21 '20 at 11:36

Johan Ström

69
2
4

score 6 · Accepted Answer · answered Sep 29 '18 at 17:40

6

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;
}

answered Sep 29 '18 at 17:40

Justin Kahn

1,311
2
11
16

An old question I just came across, but while this is often good advice when there are no alternatives, it's safer (and cleaner) to use the `rounded` prop provided by the Vuetify API than to reference the internal class names in CSS. I do this a lot myself, but only as a last resort when the API (see Johan Ström answer below) or support classes (see shawnl answer below) do not support the desired result. I'd put this answer in third place behind Johan then shawnl's answers. (Perhaps those alternatives didn't exist when this answer was posted.) – Appurist - Paul W Mar 23 '21 at 21:31

score 2 · Answer 3 · answered Jul 20 '23 at 13:13

2

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

answered Jul 20 '23 at 13:13

Ege Haskaya

21
1

score 0 · Answer 4 · answered Mar 23 '21 at 05:12

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.

Vuetify.js: round corners

4 Answers4