Only one tabbed card has border

Configuration Frontend
1

Hi,

Not sure why I can’t get white border for tab called ‘Graphs’. Help much appreciated.

type: vertical-stack
cards:
  - type: markdown
    content: "{{ states('sensor.lexmark_mc3224i_modelno') }}"
    card_mod:
      style: |
        ha-card {          
          border: none;
          border-bottom: none;
          box-shadow: none;
          border-radius: 10px 10px 0px 0px;
          background: transparent;
          font-size: 15px;
          text-align: center;
          padding: 5px;
          margin-bottom: 0px;
        }
  - type: custom:tabbed-card 
    
    tabs:
      - attributes:
          label: Stats
        card:
          type: vertical-stack
          cards:
            - type: entities
              entities:
                - entity: sensor.lexmark_mc3224i
                  name: Status
                - entity: sensor.lexmark_mc3224i_uptime
                  name: Uptime
                - entity: sensor.lexmark_mc3224i_serialno
                  name: Serial Number
                - entity: sensor.lexmark_mc3224i_bwpagesprinted
                  name: Total B/W Pages Printed
                - entity: sensor.lexmark_mc3224i_firmwarever
                  name: Firmware Version
              card_mod:
                style: |
                  ha-card {
                    border: 2px solid white;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
      - attributes:
          label: Graphs
        card:
          type: vertical-stack          
          card_mod:
            style: |
              ha-card {
                border: 2px solid white;
                box-shadow: none;
                border-radius: 10px;
                background: transparent;
              }
          cards:
            - type: custom:bar-card
              entity: sensor.lexmark_mc3224i_magenta
              name: Magenta
              color: magenta
              card_mod:
                style: |
                  ha-card {
                    border: none;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
            - type: custom:bar-card
              entity: sensor.lexmark_mc3224i_yellow
              name: Yellow
              color: yellow
              card_mod:
                style: |
                  ha-card {
                    border: none;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
            - type: custom:bar-card
              entity: sensor.lexmark_mc3224i_cyan
              name: Cyan
              color: cyan
              card_mod:
                style: |
                  ha-card {
                    border: none;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
            - type: custom:bar-card
              entity: sensor.lexmark_mc3224i_black
              name: Black
              color: black
              card_mod:
                style: |
                  ha-card {
                    border: none;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
2

Main card- mod thread has examples for this custom card. Suggest to ask all card-mod related questions there. And provide a simpler test example without other custom cards.

3

I need the bar-cards for ink levels for printer. Besides that there is only the vertical-stack card. I also removed the tab called ‘Stats’ so there was only one. I guess I will check out the Main card- mod thread

4

if it helps anyone this is what finally worked - searched other cards in my home assistant, google and yes asked chatgpt - which more often that not is not super helpful

type: vertical-stack
cards:
  - type: markdown
    content: "{{ states('sensor.lexmark_mc3224i_modelno') }}"
    card_mod:
      style: |
        ha-card {
          text-transform: none;
          border: none;
          border-bottom: none;
          box-shadow: none;
          border-radius: 10px 10px 0px 0px;
          background: transparent;
          font-size: 15px;
          text-align: center;
          padding: 5px;
          margin-bottom: 0px;
        }
  - type: custom:tabbed-card
    style: |
      ha-card {
        text-transform: none;
        background: transparent;
        border: 2px solid white;
        border-radius: 10px;
      }
      .tabbed-card-label {
        text-transform: none !important;  
      }
    tabs:
      - attributes:
          label: Stats
        card:
          type: vertical-stack
          cards:
            - type: entities
              entities:
                - entity: sensor.lexmark_mc3224i
                  name: Status
                - entity: sensor.lexmark_mc3224i_uptime
                  name: Uptime
                - entity: sensor.lexmark_mc3224i_serialno
                  name: Serial Number
                - entity: sensor.lexmark_mc3224i_bwpagesprinted
                  name: Total B/W Pages Printed
                - entity: sensor.lexmark_mc3224i_firmwarever
                  name: Firmware Version
              card_mod:
                style: |
                  ha-card {
                    text-transform: none;
                    border: 2px solid white;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
      - attributes:
          label: Ink Levels
        card:
          type: vertical-stack
          card_mod:
            style: |
              ha-card {
                text-transform: none;
                border: 2px solid white;
                box-shadow: none;
                border-radius: 10px;
                background: transparent;
              }
          cards:
            - type: custom:bar-card
              card_mod:
                style: |
                  ha-card {
                    text-transform: none;
                    background: transparent;
                    box-shadow: none !important;
                    border: 2px solid white !important;
                    font-size: 15px;
                    margin-bottom: -10px;
                    border-bottom: none;
                    border-radius: 10px 10px 0px 0px;
                  }
              direction: right
              entities:
                - color: Red
                  entity: sensor.lexmark_mc3224i_magenta
                  styles: null
                  card:
                    - border: none
                    - box-shadow: none
                    - border-radius: 0px
                    - background: transparent
                    - margin-right: "-8px"
                  name: Magenta
                  icon: mdi:gauge
                - color: Yellow
                  entity: sensor.lexmark_mc3224i_yellow
                  styles: null
                  card:
                    - border: none
                    - box-shadow: none
                    - border-radius: 0px
                    - background: transparent
                    - margin-right: "-8px"
                  name: Yellow
                  icon: mdi:gauge
                - color: Cyan
                  entity: sensor.lexmark_mc3224i_cyan
                  styles: null
                  card:
                    - border: none
                    - box-shadow: none
                    - border-radius: 0px
                    - background: transparent
                    - margin-right: "-8px"
                  name: Cyan
                - color: Black
                  entity: sensor.lexmark_mc3224i_black
                  styles: null
                  card:
                    - border: none
                    - box-shadow: none
                    - border-radius: 0px
                    - background: transparent
                    - margin-right: "-8px"
                  name: Black
              height: 30px
              max: 100
              min: 0
              padding: 2px
              title_position: bottom
              icon_position: inside
              unit_of_measurement: "%"
              width: 100%