I am enjoying setting up my lovelace wall mounted tablet, but I would like to have rounded corners on all cards. I understand that you can do this with a custom card modder, but is it possible to do this within a theme so that it applies to all cards?
Would appreciate any help - thanks!
Look at this;
2 Likes
Thanks Cinamon for your reply; but I was hoping to find a solution that would apply globally to all of my Lovelace cards, rather than having to apply it to each card individually, hence my idea of perhaps using a theme.
As far as I know, you can’t add styling for rounded corners in the Theme.
I did try to add rounded corners a while back - check out this thread I started:
I have since given up!
Thanks Martin. I’ve read through your thread and I’m glad I’m not the only one who would like to be able to style the front end more easily! I’m sure it will happen with time- Home Assistant is such a great platform and this is a very minor cosmetic problem compared to all of the great work that the devs do!
1 Like
From 0.88 there will be two new variables for use in themes:
ha-card-border-radius and ha-card-background.
11 Likes
This is fantastic news!
I’m running Hass.io on docker. If I enter the volume with a shell and execute:
find / -type f -name 'ha-card.js'
nothing comes up. Is this something that is compiled at some point?
(I realise this edit wouldn’t last past a reboot)
Excellent news! This will save a lot of time being able to adjust the overall look, rather than each card separately.
Yes. It’s compiled down into a python package called homeassitant-frontend, which then contains minified js-files. Editing them manually is hard, but it can be done…
This is good. I’ll be able to cut back on repeating border radius and backgrounds in my Lovelace. That’s going to cut many many lines out. 
Yep.
It will probably all but kill off card-modder entirely…
Awesome effort getting this brought into the core! It will be great to see more of your work follow suit
Not unless we can change more… I’ll still be using it.
What more would you like?
Currently I control the border on specific sides, box-shadow, font colours, so there is still heaps more that card-middle can do rather than these 2. I haven’t fully explored themes so maybe I might be able to globally set some of this stuff, but it’s good to fine tune some stuff.
For example, I use vertical-stack-in-card and then use card-middle to modify the different card by hiding borders, box shadows, etc to make it all look like one card.
It’s awesome that these two variables are now a stock option, as like thomasloven said I’ve seen many people use card-modder for just the purpose of these rounded corners and nothing else.
That being said, I do concur with cjsimmons. I use card-modder for many more options than these two settings. I wouldn’t change anything about it, except maybe including it as-is in HA core.
CSS style classes would be nice though. @cjsimmons ?
1 Like
Did this happen? I haven’t seen it mentioned.
really interested in this myself!
I just tried adding ha-card-border-radius: 20px to a theme.yaml file, restarted and chose that theme, but no rounded corners. So unless I misunderstood or am doing something wrong (or both!) I don’t think it happened.
EDIT: but I just learnt something. If you quote the previous post it automatically removes the quote!
EDIT2: Must have been a caching issue because it works now.
I can’t find any mention of it - unless it’s really well hidden!