Checklist

[x] I updated the card to the latest version available
[x] I cleared the cache of my browser

Describe the bug Formatting seems to be wrong after 2022.11 and the new rounded “icons”

When drawing two cards on top of each other - I usually put some timer or other data in the overlaid one only while that device is on.

Version of the card Version: 3.4.2 To Reproduce This is the configuration I used:

type: custom:button-card
      entity: sensor.washer_power
      state_display: '[[[ return Math.round(entity.state) + " W" ]]]'
      margin: none
      show_name: false
      show_icon: false
      show_state: true
      styles:
        card:
          - box-shadow: none
          - font-size: 12px
        state:
          - color: |
              [[[
                if (states['sensor.washer_power'].state > 2)
                  return "red";
                else
                  return "white";
              ]]]

Screenshots If applicable, add screenshots to help explain your problem. See above

Expected behavior A clear and concise description of what you expected to happen. The border/margin of the custom card should not visible, as it was in pre-2022.11

Desktop (please complete the following information):

Browser [e.g. chrome, safari] Chrome
Version [e.g. 22] 106.0.5249.119

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context Add any other context about the problem here.

I have same problem after 2022.11

white lines

Captura de tela 2022-11-09 21 25 06

      - type: custom:decluttering-card
        template: switch_button_card
        variables:
          - entity: light.luz_porta
          - name: Porta
          - icon: wall-sconce-round
          - aspect_ratio: 1/1
          - show_label: false
          - margin-right: 40px
          - hold_action:
              action: none
          - double_tap_action:
              action: none

all aplications and browsers

As a workaround, assuming you don't want the borders visible in 2022.11.x you can globally disable those in the theme as discussed in the HA forum:

ha-card-border-width: 0

Ref to tested workaround: https://github.com/troinine/hass-config/commit/c194bb54a470f6c1749532b8444780507bae24d3

Or alternatively, you can set it only to your button-card by defining it in the card style:

  styles:
    card:
      - border-width: 0

Hi,

I set

  styles:
    card:
      - border-width: 0

but no effect.

My card:

  - type: custom:button-card
    color: '#D1DBAE'
    name: Salon
    styles:
      card:
        - background-color: '#EE2E2'
        - height: 25px
        - border-width: 0
      name:
        - font-size: 20px
  - entity: input_select.chauffage
    name: Mode
  - type: conditional
    conditions:
      - entity: input_select.chauffage
        state: Manuel
    row:
      entity: input_number.consigne_salon
      type: custom:numberbox-card
      name: Réglage consigne
  - type: custom:hui-element
    card_type: glance
    show_name: false
    style: |
      ha-card {
        background: var(--background-card-color);
        box-shadow: none;
        font-size: 18px;
        top: -10px;
        margin: -20px
      }
    entities:
      - entity: sensor.thgr810_thgn800_e9_0a_temperature
        icon: mdi:cloud
      - entity: input_number.consigne_salon
        icon: mdi:target
      - entity: input_number.puissance_radiateur_salon
        icon: mdi:lightning-bolt
      - entity: switch.pilot_wire_4
        icon: mdi:radiator
      - entity: sensor.daily_chauffage_salon_round
        icon: mdi:calendar-today
  - type: divider
  - type: custom:scheduler-card
    standard_configuration: false
    discover_existing: false
    include:
      - input_number
    time_step: 15
    tags: Salon
    show_add_button: false
    title: ''
    display_options:
      primary_info:
        - '{action}'
      secondary_info: relative-time
  - type: divider
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.thgn122_123_thgn132_thgr122_228_238_268_fa_02_temperature
        unit: °C
        color: '#df6366'
        show_legend: false
    show:
      icon: false
      name: false
      labels: true
      extrema: true
    hours_to_show: 24
    line_width: 1
    points_per_hour: 12

Hi,

I set

  styles:
    card:
      - border-width: 0

but no effect.

My card:

  - type: custom:button-card
    color: '#D1DBAE'
    name: Salon
    styles:
      card:
        - background-color: '#EE2E2'
        - height: 25px
        - border-width: 0
      name:
        - font-size: 20px
  - entity: input_select.chauffage
    name: Mode
  - type: conditional
    conditions:
      - entity: input_select.chauffage
        state: Manuel
    row:
      entity: input_number.consigne_salon
      type: custom:numberbox-card
      name: Réglage consigne
  - type: custom:hui-element
    card_type: glance
    show_name: false
    style: |
      ha-card {
        background: var(--background-card-color);
        box-shadow: none;
        font-size: 18px;
        top: -10px;
        margin: -20px
      }
    entities:
      - entity: sensor.thgr810_thgn800_e9_0a_temperature
        icon: mdi:cloud
      - entity: input_number.consigne_salon
        icon: mdi:target
      - entity: input_number.puissance_radiateur_salon
        icon: mdi:lightning-bolt
      - entity: switch.pilot_wire_4
        icon: mdi:radiator
      - entity: sensor.daily_chauffage_salon_round
        icon: mdi:calendar-today
  - type: divider
  - type: custom:scheduler-card
    standard_configuration: false
    discover_existing: false
    include:
      - input_number
    time_step: 15
    tags: Salon
    show_add_button: false
    title: ''
    display_options:
      primary_info:
        - '{action}'
      secondary_info: relative-time
  - type: divider
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.thgn122_123_thgn132_thgr122_228_238_268_fa_02_temperature
        unit: °C
        color: '#df6366'
        show_legend: false
    show:
      icon: false
      name: false
      labels: true
      extrema: true
    hours_to_show: 24
    line_width: 1
    points_per_hour: 12

TRY

styles: card:

border: 0
border-width: 0
ha-card-border-width: 0

or, for another buttons or spaces

style: | ha-card { border: 0px; }

Hi,

I tried but without effects ....

`type: entities entities:

type: custom:button-card color: '#D1DBAE' name: Salon styles: card:
- background-color: '#EE2E2'
- height: 25px
- border-width: 0
- border: 0
- ha-card-border-width: 0 name:
- font-size: 20px
entity: input_select.chauffage name: Mode
type: conditional conditions:
- entity: input_select.chauffage state: Manuel row: entity: input_number.consigne_salon type: custom:numberbox-card name: Réglage consigne
type: custom:hui-element card_type: glance show_name: false style: | ha-card { background: var(--background-card-color); box-shadow: none; font-size: 18px; top: -10px; border: 0px; margin: -20px } entities:
- entity: sensor.thgr810_thgn800_e9_0a_temperature icon: mdi:cloud
- entity: input_number.consigne_salon icon: mdi:target
- entity: input_number.puissance_radiateur_salon icon: mdi:lightning-bolt
- entity: switch.pilot_wire_4 icon: mdi:radiator
- entity: sensor.daily_chauffage_salon_round icon: mdi:calendar-today
type: divider
type: custom:scheduler-card standard_configuration: false discover_existing: false include:
- input_number time_step: 15 tags: Salon show_add_button: false title: '' display_options: primary_info:
  - '{action}' secondary_info: relative-time
type: divider
type: custom:mini-graph-card entities:
- entity: sensor.thgn122_123_thgn132_thgr122_228_238_268_fa_02_temperature unit: °C color: '#df6366' show_legend: false show: icon: false name: false labels: true extrema: true hours_to_show: 24 line_width: 1 points_per_hour: 12 `

Hi,

I tried but without effects ....

`type: entities entities:

type: custom:button-card color: '#D1DBAE' name: Salon styles: card:

background-color: '#EE2E2'

height: 25px

border-width: 0

border: 0

ha-card-border-width: 0 name:

font-size: 20px

entity: input_select.chauffage name: Mode

type: conditional conditions:

entity: input_select.chauffage state: Manuel row: entity: input_number.consigne_salon type: custom:numberbox-card name: Réglage consigne

type: custom:hui-element card_type: glance show_name: false style: | ha-card { background: var(--background-card-color); box-shadow: none; font-size: 18px; top: -10px; border: 0px; margin: -20px } entities:

entity: sensor.thgr810_thgn800_e9_0a_temperature icon: mdi:cloud

entity: input_number.consigne_salon icon: mdi:target

entity: input_number.puissance_radiateur_salon icon: mdi:lightning-bolt

entity: switch.pilot_wire_4 icon: mdi:radiator

entity: sensor.daily_chauffage_salon_round icon: mdi:calendar-today

type: divider

type: custom:scheduler-card standard_configuration: false discover_existing: false include:

input_number time_step: 15 tags: Salon show_add_button: false title: '' display_options: primary_info:

'{action}' secondary_info: relative-time

type: divider

type: custom:mini-graph-card entities:

entity: sensor.thgn122_123_thgn132_thgr122_228_238_268_fa_02_temperature unit: °C color: '#df6366' show_legend: false show: icon: false name: false labels: true extrema: true hours_to_show: 24 line_width: 1 points_per_hour: 12 `

look my codes:

tomadas.yaml

type: vertical-stack cards: ###########################################################################################################################

COLUNA 001

###########################################################################################################################

coluna 01 -----------------------------------

type: vertical-stack cards:
- type: vertical-stack cards:
  - type: vertical-stack cards:
    - type: custom:decluttering-card template: title_button_card variables:
      - name: Tomadas
- type: horizontal-stack cards:
  - type: "custom:button-card" color_type: blank-card styles: card:
    - border: 0
    - width: 10px
  - type: custom:decluttering-card template: switch_button_card variables:
    - name: Café
    - label: on/off
    - icon: coffee
    - color: rgb(140, 73, 32)
    - show_state: false
    - tap_action: action: toggle haptic: light
    - hold_action: action: none
    - entity: switch.tomada_1
    - margin-right: 40px
  - type: custom:decluttering-card template: switch_button_card variables:
    - name: Filtro
    - label: on/off
    - icon: beer
    - color: rgb(157,220,237)
    - show_state: false
    - tap_action: action: toggle haptic: light
    - hold_action: action: none
    - entity: switch.tomada_2
    - margin-right: 40px
  - type: custom:decluttering-card template: switch_button_card variables:
    - name: Fogão
    - label: on/off
    - icon: fire-circle
    - color: rgb(252,82,48)
    - show_state: false
    - tap_action: action: toggle haptic: light
    - hold_action: action: none
    - entity: switch.sonoff_fogao
    - margin-right: 40px
  - type: custom:decluttering-card template: blank_button_card
  - type: "custom:button-card" color_type: blank-card styles: card:
    - border: 0
    - width: 10px
- type: horizontal-stack cards:
  - type: "custom:button-card" color_type: blank-card styles: card:
    - border: 0
    - width: 10px
  - type: conditional conditions:
    - entity: input_boolean.exibir_natal state: "on" card: type: horizontal-stack cards:
      - type: "custom:decluttering-card" template: switch_button_card variables:
        
        name: Natal
        
        label: árvore
        
        icon: pine-tree
        
        color: rgb(154,181,2)
        
        show_state: false
        
        tap_action: action: toggle haptic: light
        
        hold_action: action: none
        
        entity: switch.tomada_3
        
        margin-right: 40px
  - type: custom:decluttering-card template: blank_button_card
  - type: custom:decluttering-card template: blank_button_card
  - type: custom:decluttering-card template: blank_button_card
  - type: "custom:button-card" color_type: blank-card styles: card:
    - border: 0
    - width: 10px

decluttering_templates.yaml

Cartão de botão padrão (usado durante a maior parte da minha configuração)

switch_button_card: default:

size: 30%
lock: false
color: auto
background_color: var(--homekit-white)
variable: spin
spin: false
show_name: true
show_state: true
show_label: true
show_icon: true
show_last_changed: false
tap_action: action: toggle haptic: medium
hold_action: action: none haptic: medium
double_tap_action: action: none haptic: medium
aspect_ratio: 1/1
margin-right: 40px
label: " "
opacity: 0.4
on_icon_color: black
off_icon_color: gray
off_name_color: gray
off_state_color: gray
color_name_default: gray card: type: custom:button-card name: "[[name]]" icon: "mdi:[[icon]]" size: "[[size]]" color: "[[color]]" on_icon_color: "[[on_icon_color]]" lock: "[[lock]]" aspect_ratio: "[[aspect_ratio]]" entity: "[[entity]]" label: "[[label]]" show_name: "[[show_name]]" show_icon: "[[show_icon]]" show_state: "[[show_state]]" show_label: "[[show_label]]" show_last_changed: "[[show_last_changed]]" tap_action: "[[tap_action]]" hold_action: "[[hold_action]]" double_tap_action: "[[double_tap_action]]" styles: card:
- border: 0
- border-width: 0
- ha-card-border-width: 0
- border-radius: 12px
- --paper-card-background-color: "[[background_color]]"
- background-color: "rgb(255, 255, 255)" label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: gray grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content img_cell:
- align-self: start
- text-align: start
- margin-right: "[[margin-right]]" name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- color: "[[color_name_default]]" state:
  - value: "on" "[[variable]]": "[[spin]]" styles: name:
    - color: black state:
    - color: gray lock:
    - color: black
  - value: "off" styles: card:
    - opacity: "[[opacity]]" icon:
    - color: "rgb(80, 80, 80)" name:
    - color: "rgb(80, 80, 80)" state:
    - color: "rgb(80, 80, 80)" label:
    - color: "rgb(80, 80, 80)" lock:
    - color: black
  - value: "idle" styles: card:
    - opacity: 0.4 name:
    - color: "rgb(80, 80, 80)" label:
    - color: "rgb(80, 80, 80)" icon:
    - color: "rgb(80, 80, 80)"
  - value: "unavailable" styles: card:
    - opacity: 0.2 icon:
    - color: "rgb(80, 80, 80)" state:
    - color: "rgb(80, 80, 80)" name:
    - color: "rgb(80, 80, 80)"

CARTOES EM BRANCO

blank_button_card: default:

aspect_ratio: 1/1
background_color: "rgba(37, 129, 171, 0.0)" card: type: "custom:button-card" color_type: label-card styles: card:
- border: 0
- height: 0px
- padding: 0px 0px 0px tap_action: action: none hold_action: action: none

space_button_card: default:

height: 150px card: type: "custom:button-card" color_type: blank-card styles: card:
- height: "[[height]]"
- border: 0
- padding: 0px 0px 0px

As a workaround, assuming you don't want the borders visible in 2022.11.x you can globally disable those in the theme as discussed in the HA forum:
ha-card-border-width: 0
Ref to tested workaround: troinine/hass-config@c194bb5

Or alternatively, you can set it only to your button-card by defining it in the card style:
  styles:
    card:
      - border-width: 0

This worked for me! Thank you.

custom-cards / button-card

margin: none still visible after 2022.11 release #632

COLUNA 001

coluna 01 -----------------------------------

Cartão de botão padrão (usado durante a maior parte da minha configuração)

CARTOES EM BRANCO