"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

Header Menu Click Causes Blurring of Website Background

I need help adding a blur effect to my site background only when the header menu is clicked and active. Once the menu is activated, the .ct-active class is added to it. The CSS code below works for styling individual items - the menu turns red when activ ...

cssmenuheaderblur

Height Miscalculation: Chrome and FF encounter window dimension

There is a large application with numerous pages. When I use the console to execute console.log($(window).height()) on any page within the application, it returns the expected result: the height of the window, not the document. For instance: $(window).he ...

javascripthtmlcssgoogle-chromeprimefaces

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

Issues observed when implementing replaceWith() to replace text tags with input field on a web page

Just a simple EDIT request. I want to modify the headers so that when I click on the "edit" icon, the header will change to a text field and the "edit" icon will switch to a "save" icon. $('#editheader').click(function(e){ va ...

jqueryhtmlcss

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

cssspring-mvc

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

Arrange data in a table using Vue.js

Does anyone know how to implement column sorting in a table? I want the ID button to order the entire column from highest to lowest or vice versa when clicked, and the same for the other two buttons. Any suggestions on how I can achieve this? <table ...

sortingvue.jsvuejs2vue-component

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

javascriptphphtmlcsstwitter-bootstrap

What is the best way to align this alert in the center of the screen

Hey there, I'm facing an issue with aligning an alert horizontally when a user clicks a button. I've been trying different methods but can't seem to get it right. The goal is to keep the alert within #main. You can check out this fiddle for ...

htmlcsstwitter-bootstrap

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

javascripthtmlcssiossafari

Prevent Typing in Vuetify's Combobox - A Guide to Disabling Input in the Vuetify Combobox

Is there a way to prevent users from typing inside the vuetify combobox? Below is my current implementation of the combobox: <v-combobox :loading="isSurveyBeingPopulated" class="static--inputs" color="red" box :items="folders" :rules="[rules.required] ...

vue.jscomboboxvuetify.js

Getting a jQuery alert on iOS devices: A step-by-step guide

The notification using <span class="close">&times;</span> functions perfectly on all desktop browsers, but unfortunately fails to trigger on mobile devices ... When attempting to view the page on an iPhone, the <span class="close">&am ...

jqueryhtmlioscssiphone

Creating a graphql mutation in Vue Apollo without any parameters: A step-by-step guide

In my Vue application, I am working on toggling the width of a sidebar menu. To keep track of different UI states such as whether the sidebar is open or closed, I plan to use a UI object stored in a local Apollo cache. I have a query that checks the state ...

vue.jsgraphqlapollovue-apollo

The primary content division is trapped behind the side navigation bar

Why is my sidebar fixed on the left of the screen overlapping with the main content? I want the main content to be displayed next to the navbar and scroll up and down while keeping the nav bar in place, but no matter what styling I apply, it doesn't w ...

cssreactjs

Flip the direction of this vertical CSS motion blur effect

Is there a way to modify this code so that the object can have a vertical motion blur instead of a horizontal one? I want it to move from top to bottom and then back up. Can anyone assist me with this? http://jsfiddle.net/db8gr4y6/ #outer { posit ...

htmlcsscss-transitionscss-animations

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...

jqueryioscsscss-transitions

Is there a way to horizontally center a content container in Flutter similar to a "max-width" container in CSS?

How can I create a centered content box like this in Flutter?: .content-box { margin-left: auto; margin-right: auto; width: 100%; max-width: 600px; background-color: blue; height: 100vh; } <div class="content-box"> Cont ...

htmlcssflutter

Encountering Problem with Office Object Access in Vue.js Outlook Add-in

Just getting started with vue.js and encountering an issue when trying to access the Office object within Vue methods. In the code snippet below, calling load() from created function works fine, but attempting to call it from this.loadProps() does not wor ...

vue.jsoffice-js

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

fiddle: https://jsfiddle.net/f8hscrd0/66/ html: <body> <div id="canvas_div"> </div> </body> js: let colors = [ ['#000','#00F','#0F0'], ['#0FF','#F00','#F0F&a ...

javascriptcssgoogle-chromehtml5-canvas