Vuetify Rounded Card Design

Introduction

The idea is to customize the corners of the v-card component in Vuetify so that it looks rounded. Let’s see what is the impediment and how to overcome that easily.

Background

While working on designing a Billing Subscription Box in a current project, the requirement was to design rounded corners instead of normal corners.

Let’s Code

Let’s first have a normal card which would look something like below.

The code is pretty simple, isn’t it!

Tadit Dash
Tadit Dash is an Indian by heart, a Software Engineer by profession, an Author and a Speaker by passion.


mdi-web


mdi-twitter


mdi-linkedin


mdi-facebook


mdi-instagram

Now let’s go to Vuetify Documentation and find out if there is any way to make the corners round. Here it is – https://vuetifyjs.com/en/components/cards/

I can see that there is a property named as shaped, which helps to add border-radius. That is what we needed. Let’s try that and see what happens.

Wow! We can see the corners are rounded now. However, only the left top and bottom right are having rounded corners. If this is what you need, then your work is done. Copy the code below and enjoy.

Tadit Dash

But I need something else. I wanted all the corners to be rounded which is not possible by default. Then the option here is to do it myself. For that, let’s analyze the rendered HTML first.

So, it’s quite clear how the corners are getting added under the hood. The following CSS is helping to add a radius at every corner.

.v-card--shaped {
border-radius: 24px 4px;
}

But it is not uniform. Top Left, Bottom Right is 24px and Top Right, Bottom Left is 4px. To make it the same across all the corners we need to add the same radius, of course. To so that, we can add a class to the v-card and write CSS rules accordingly.

.rounded-card {
border-radius: 24px;
}

After this change, the rendered HTML is modified with a radius to all the corners. Screenshot below.

The class rounded-card takes over the border-radius property and v-card--shaped is no more applied. The card looks rounded now as all the corners are having a uniform radius. You can increase the radius as per your needs.

Here is the CodePen



CodePen Embed Fallback



Help Someone

Share in your circle. Hit the social icons below. Keep coding folks.