Rounded CSS Style

[octaviz]

Do you know if you can round the corners in any way ?, I am trying to apply the CSS but it does not work, I have almost all the cards with the rounded corner

Thanks you!!

[dnguyen800]

Unfortunately I don't know how to load the default CSS style applied to Lovelace cards, I hardcode them in the .js file. How are you applying CSS styles to these other cards?

In the meantime, I'll add an option where you can add in your CSS style into the card. Will update on the weekend.

If you want to play around with the CSS, you can edit the .js file directly and edit the CSS section. Should be easy to spot.

[octaviz]

As soon as I can try to modify the CSS of the .js file to see if I can change it, I will tell you if it works.

Example CSS in Card

style: |
  ha-card {
    border: solid 1px #ffc500;

    border-radius: 10px;
    background: rgb(255,70,70);
          background: linear-gradient(349deg, rgba(0,51,102,1) 24%, rgba(0,80,255,1) 100%);
          color: white;
          }
          ha-icon {
          color: white;
  }

Thanks!!

[dnguyen800]

Unfortunately I tried modifying the CSS in the .js file but didn't have any luck adding the border-radius, so I don't have any solution or workaround at the moment. I'll look into it more this weekend, but no promises. Feel free to pass along any information you find on modifying CSS in Lovelace.

Are you using any custom Lovelace integration like 'card-mod' to add your CSS?

[scstraus]

I just went in and changed border-radius in my theme definition itself and it applied to every card except this one.

[Ndrinta]

Have someone found a solution? I'm really interested in this "feature".

[Swampen]

I have made a pull request that should fix this issue 😊

[dnguyen800]

Merged the PR, thanks @Swampen !