Card with rounded corner and custom border color

Configuration
1

Is it possible to make your lovelace card having:

  1. Rounded corners
  2. Custom border color and thickness of border
  3. Transparent background

?

2

Yes to all three.

  1. Add this to your theme:
  ha-card-border-radius: 10px
  1. Use card mod to style the border. e.g.
entities:
  - switch.siren_upstrs
show_header_toggle: true
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
title: Siren
type: entities
  1. Theme again. The last number is the transparency:
paper-card-background-color: "rgba(255, 255, 255, 0.4)"
2 Likes
3

Nice, thanx! :+1:

But its not possible to have rounded corner and border on media_player ?

4

That’s correct. So use the mini media player card instead:

1 Like
5

I will try that, thanx!

6

Ok, rounded borders works with mini media player but with artwork its not pretty.
Artwork is still square image and layer is on top of border, meaning artwork is showing on the outside of the rounded border corners. Any solution for this?

I actually think I have seen somebody doing this before so I think its doable… :slight_smile:

One more thing, is it possible to resize the mini media player (or media_player) somehow? Like width and height…

7

You would be better asking those questions here:

I don’t use the artwork setting or resize it.

Screenshot_2019-10-18%20Home%20Assistant

8

Hi, where to find templates on hassio?
Thx

9
10

This should absolutely work even with artwork, unless you got a very old version of the card, try updating the card.

Sure, try with card-mod, let me know if you need help with the CSS.

1 Like
11

Thank you, I will try your suggestions! :+1:

12

Good Evening

I ma trying to get Curved Card edge . But i have no more idea about how to install Card Mode .
Can you please explain the step…

I believe you will be solved my issue

13

This is the easiest way:

14

Thanks for your information …

And i have done curved edge with below code in themes.yaml

ha-card-border-radius: '25px'
15

I have installed success fully HACS .
and installed card mode

16

i want outline my cards but unsure how or what to put for code and where to put it

Screenshot 2021-03-15 174642
Screenshot 2021-03-15 1746421884×877 180 KB

17

which theme are you using? I really like it.
image

18

My own, Day and Night - #29 by tom_l

19

Thank you.