How to remove rounded corners from cards?

Configuration Frontend
1

I’ve been mainly concentration on functionality, now it is time to tidy up a bit and tka care of the aesthetics…

Very first question is, how to remove those ugly rounded corners from cards or at least diminish the radius of them significantly? (Bloody hell, they are stuffing these into every place these days… Same goes with pastel colors, which make me physically feel sick…)

1 Like
2

In each theme there is a theme.yaml, which includes “Cards” -saection with setting

ha-card-border-radius: '20px'

This, obviously, controls the radius

3

Do the opposite of this if you want to set it globally.

4

What exactly is the opposite of that? That technique doesn’t work anymore anyway since some HA changes a year or so ago.

5

It definitely still works for me. I just confirmed by making a change to add, cleared my cache and reloaded. I’m on 2022.2.9. I have this line in my www/custom.js

document.documentElement.style.setProperty('--ha-card-border-radius', '5px');

I could’ve clarified what I meant with opposite better: I meant, if one doesn’t like the rounded corners, you can set that CSS variable to 0px.

1 Like
6

I’ll have to try it again. Thanks.

1 Like