"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome.

DESIGN ATTEMPT:

<div class="text-center rotate-ninety ml-n6">
          <v-card 
            hover 
            ripple 
            class="rounded-card py-5 px-2" 
            elevation="10" 
            color="orange" 
          >
              <v-icon 
                color="black" 
                left
              >
                mdi-domain
              </v-icon>
              <span class="black--text">
                Domain
              </span>            
            </v-card>               
          </div>

CUSTOM STYLING:

.rotate-ninety {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.rounded-card {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

Could I possibly be overlooking something in my code?

Appreciate any insights,

Chris

cssvue.jsvuetify.js

Answer №1

Here is a suggestion to customize the .v-sheet.v-card class rule:

.rounded-card .v-sheet.v-card {
    border-radius: 25px 25px 0 0;
}

Check out the DEMO here!

Answer №2

Utilize the border radius helper classes provided by Vuetify for easy styling.

If you want to create a card with rounded corners at the top: 

<v-card tile class="top-rounded">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The mobile version of the page has extra white space at the bottom

I have a responsive design that is working well, but I am experiencing an issue on mobile devices where there is white space at the bottom of the page. * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; ...

htmlcss

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

javascriptjquerycssresponsive-designresponsive

How come "display:none" is still occupying space on the page?

Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies sp ...

htmlcss

Where to position a button in the middle of a div that varies in size

I'm currently working with this code snippet: <div class="outer"> <ul class="list"> <li class="inner"> <div class="line">information1</div> <div class="line">hyperlink1</div&g ...

csshtmlbuttonalignment

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

Achieving Full Width Coverage for a div with 100% Width Using the Meta Viewport Tag "width=device-width"

Currently, I am working on optimizing my website to adjust for mobile browsers. In order to achieve this, I have two CSS files - one that is always included and another with media="screen and (max-width:500px)" To ensure proper functionality, I am utili ...

htmlcssviewportmeta

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

cssangulargrid

"Trouble with Vue.js post request: JSON data received but unable to be assigned to Vue's data

Hey there! I'm currently using vuejs and ajax for sending formData and getting a json response. While the json response is being received, I am facing an issue in assigning it to the vue data object. Any suggestions on why this might be happening? Bel ...

ajaxpostvue.js

Unable to place an absolutely positioned Div within relative parent containers

After applying the id "enterGame" with position: absolute, I noticed that the div disappears. Even when I tried adding position: relative to the body or html tag, the div remained invisible. The relevant code snippet is as follows: html { height: 10 ...

htmlcss

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Can you recommend a quality article discussing the guidelines for using display:block, :inline, and :inline-block in CSS, along with explanations on when to utilize each one? Additionally, in what scenarios should we override the display property through ...

cssxhtmlsemantic-markup

Having trouble with SVG Circles - Attempting to create a Speedometer design

Trying to implement a speedometer in one of the components of my Vue project, but encountering an issue. When I input 0 into my progress calculation for determining the stroke fill, it overlaps with the background circle instead of staying within its bound ...

typescriptvue.jsmathsvg

Align two divs with text in the center

I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...

css

Tips for implementing picker options to limit the starting date in the Element UI date-picker

I'm currently developing a web application using Element UI, with a specific focus on the el-date-picker component. Here is the code I have written for defining a period using two calendars. However, I am facing difficulty in applying picker-options ...

vue.jselement-ui

Show multiple items using v-for in a single textarea

Looking for a solution to display looped values within a single textarea instead of separate textareas. Currently using Laravel and Vue, which is showing the values individually in their own textarea elements. <textarea> <div v-for="(ite ...

laravelvue.jsvuejs2

The issue with Vuex when using custom checkbox components with default checked states

This is a unique implementation of my custom checkbox component: <template> <label class="custom-checkbox"> <input type="checkbox" :checked="isChecked" @change="handleChange" ...

vue.jsvuejs2vue-componentvuex

Tips for managing Vue component content prior to data being fully loaded

I'm currently integrating product category data from Prismic into my Nuxt project and seeking guidance on best practices. Specifically, I need clarity on managing the state when data is still being fetched and there's no content to display in the ...

typescriptvue.jsvuexnuxtjs

Incorporating Bootstrap's Inline Design Elements

I am having trouble aligning a series of elements horizontally using bootstrap as shown in the example image below: Whenever I add the "form-control" class to the input element, it gets pushed down below the other elements. I have experimented with differ ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

javascripthtmlcss

Is it true that Laravel Vue Components can solely transmit numerical values?

When working on my UserMenu.vue component, I encountered an issue. Here is the code snippet from UserMenu.vue: export default { props: ['nameVal'], data () { return { } } } Then, in the blade. ...

phplaravelvue.js

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss