HACS Button Card - Is it possible to change border color depending on the state?

Third party integrations
1

Hey All, I am wondering if there’s a way to change the border of a custom button card. I’m using it to display the temperature and I have the color change on that depending on the numeric state and I tried to copy the code to change the border color but it didn’t work.

Here’s what I have:

type: custom:button-card
entity: sensor._gv_temperature
show_name: false
show_state: true
styles:
  card:
    - border-radius: 1
    - color: |
        [[[
          if (entity.state <= 69.99) return 'khaki';
          if (entity.state >= 70 && entity.state < 72) return 'yellowgreen';
          if (entity.state >= 72 && entity.state < 77) return 'green';
          if (entity.state >= 77 && entity.state < 79) return 'yellowgreen';
          else return 'red';
        ]]]
#    - border: |
#        [[[
#          if (entity.state <= 69.99) return 'khaki';
#          if (entity.state >= 70 && entity.state < 72) return 'yellowgreen';
#          if (entity.state >= 72 && entity.state < 77) return 'green';
#          if (entity.state >= 77 && entity.state < 79) return 'yellowgreen';
#          else return 'red';
#        ]]]
  icon:
    - color: |
        [[[
          if (entity.state <= 69.99) return 'khaki';
          if (entity.state >= 70 && entity.state < 72) return 'yellowgreen';
          if (entity.state >= 72 && entity.state < 77) return 'green';
          if (entity.state >= 77 && entity.state < 79) return 'yellowgreen';
          else return 'red';
        ]]]
2

You should take time to understand what you’re editing. These are CSS Properties. So whenever you want to edit something, you should google search for it adding css property in your search. Otherwise you’ll be guessing what to use.

In this instance, you’ll most likely have to set a border-width in pixels and border-color.

I use w3schools to find most css properties too, so you can include that in your search as well.

1 Like
3

Return not just the color but other border related values:

:
  icon:
    - border-bottom: |
        [[[
          if (entity.state == 'home')
            return "0.4rem solid var(--paper-item-icon-active-color)";
          return null;
        ]]]
:
1 Like
4

I found out how to do it in case anyone else needs help down the road. Just replace the border from the yaml in the 1st post with this:

    - border: |
        [[[
          if (entity.state <= 69.99) return '2px solid khaki';
          if (entity.state >= 70 && entity.state < 72) return '2px solid yellowgreen';
          if (entity.state >= 72 && entity.state < 77) return '2px solid green';
          if (entity.state >= 77 && entity.state < 79) return '2px solid yellowgreen';
          else return '2px solid red';
        ]]]
2 Likes