Stack-in-card no borders

Hi there,

I’ve created a card using Stack-in-card. It is bassicly 2 cards on top off each other. I’m trying to get rid of the border around it but I’m unsuccesfull…

2023-01-16 16_52_24-Overzicht – Home Assistant

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    layout: horizontal
    primary: |2-
           {% if states("input_boolean.washing") == "on" %}
                    Klaar
                    {% elif states("input_boolean.washing") == "off" %}
                    Bezig
                    {% endif %}
    secondary: ''
    icon: mdi:washing-machine
    icon_color: |-
      {% if states("input_boolean.washing") == "on" %}
      green
      {% elif states("input_boolean.washing") == "off" %}
      orange
                {% else %}
                none
                {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
           clip-path: polygon(0% 0%, 0% 100%, 24% 100%, 24% 33%, 75% 33%, 75% 84%, 1% 84%, 10% 100%, 100% 100%, 100% 0%);
          }
          .shape {
          --shape-color: none;
          }
        .: |
          ha-card {
          --icon-symbol-size: 55px
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: |-
      {% if states("input_boolean.washing") == "on" %}
      green
      {% elif states("input_boolean.washing") == "off" %}
      orange
                {% else %}
                none
                {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {{ '--icon-animation: spin 1s linear infinite;' if is_state('input_boolean.washing','off') }}
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
          .shape {
          --shape-color: none;
          }
        .: |
          ha-card {
           top: -70px;
           --icon-symbol-size: 65x
          }
card_mod:
  style: |
    ha-card {
      width: 150px;
      lenght: 500px;
      height: 65px;
      border-radius: 20px;
      margin-bottom: 1px;
    }

I’ve tried adding the following under ha_card for both cards but the border remains :frowning:

      background: none;
      box-shadow: none;

need this

      - border-width: 10

Hmm, tried that but still it looks the same… did i put it on the correct position?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    layout: horizontal
    primary: |2-
           {% if states("input_boolean.washing") == "on" %}
                    Klaar
                    {% elif states("input_boolean.washing") == "off" %}
                    Bezig
                    {% endif %}
    secondary: ''
    icon: mdi:washing-machine
    icon_color: |-
      {% if states("input_boolean.washing") == "on" %}
      green
      {% elif states("input_boolean.washing") == "off" %}
      orange
                {% else %}
                none
                {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
           clip-path: polygon(0% 0%, 0% 100%, 24% 100%, 24% 33%, 75% 33%, 75% 84%, 1% 84%, 10% 100%, 100% 100%, 100% 0%);
          }
          .shape {
          --shape-color: none;
          }
        .: |
          ha-card {
          - border-width: 10;
          --icon-symbol-size: 55px
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: |-
      {% if states("input_boolean.washing") == "on" %}
      green
      {% elif states("input_boolean.washing") == "off" %}
      orange
                {% else %}
                none
                {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {{ '--icon-animation: spin 1s linear infinite;' if is_state('input_boolean.washing','off') }}
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
          .shape {
          --shape-color: none;
          }
        .: |
          ha-card {
           top: -70px;
           - border-width: 10;
           --icon-symbol-size: 65x
          }
card_mod:
  style: |
    ha-card {
      width: 150px;
      lenght: 500px;
      height: 65px;
      border-radius: 20px;
      margin-bottom: 1px;
    }

Hi, can you check my config below? Not sure if I have added your solution on the correct position

you need to put it in both card_mod entries if you dont want any border

I already figured it out. → border: none;