Rounded corners on cards

Share your Projects!
1

Anyone know how to change the corner radius on the cards within lovelace?
Whilst I’m at it, I also want to change the alpha of them too.

2

Are you asking for the CSS or how to apply the CSS?

3

How to apply the CSS.

I have tried a very hacky way to do this with no success see here. Basically, you have to clear the browsers data for it to take effect, and then it only seems to effect lovelace in Firefox and not chrome.

Just wondered if there is a way to inject the css in there somehow so it only takes a browser refresh to load the new CSS?!?!?

4 
- type: custom:card-modder
  card:
    type: entities
    entities:
      - entity: 
      - entity:
  style:
    border-radius: 8px
1 Like
5

Hey! You stole my thunder! :slight_smile:

1 Like
6

Not sure if it’s just late or what, but I can’t figure out how to add this?!?!?

You got any real-world code?

7

You need custom:card-modder

8

Yup got that, and the demo works as per the code on the github page (cats!), but I don’t see how you apply this to other cards in the page??

9

ah - think I got it!

10

bit hackey though to add corner rad to every card on a page! It’d be way easier if you could just style the interface with CSS!

11

Grrr,

Seems card-modder doesn’t like folding-group-entity-row cards.

If I add the code - everything on the UI disappears

      - type: custom:card-modder
        card:
          type: custom:folding-group-entity-row
          entity: group.upstairs
        style:
          "background": "#2b2d3199"
          border-radius: 12px
          color: white
12

I much prefer your style.js method of overriding the css. Modifying the css through yaml seems like it must be maintenance heavy (config parser must keep pace with css changes) and keeps the config tightly coupled to the implementation.
card-modder is a reasonable solution, but one that I don’t think should need to exist.