Rounded corners gone

[bkr1969 (Brian)]

All my rounded corners have disappeared after updating to 2024.4.0. How do I get them back?

What’s weird is that when I go into edit mode, the corners all show as rounded in the preview, but they never render correctly when edit is exited. I can add:

card_mod:
      style: |
        ha-card {
          border-radius: 20px;
        }

to some cards and get them to round, but others won’t even with this added code. This should be theme wide for me as I’ve checked the yaml of the specific theme and the border radius is there, it just doesn’t show.

(Yes, I’ve cleared the cache, re-started, etc. No luck)

EDIT: This seems to only be an issue on my picture elements main card.

[LiQuid_cOOled (Not really a...)]

Try

card_mod:
      style: |
        ha-card {
          border-radius: 20px !important;
        }

[Ildar_Gabdullin]

@bkr1969

All my rounded corners have disappeared after updating to 2024.4.0

Test with a standard theme.
I do not know any “border-radius”-related changes in 2024.4.

@bkr1969

This seems to only be an issue on my picture elements main card.

See, rounding is here - both for the PE card & inner Entities card:

[mousspi]

Same here since update to 2024.4.0 (and also 2024.4.1).
I did not have time to perform tests but it’s only the case where I use layout-card (GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.). Others cards are still rounded.
I’m running HAOS on raspberry, Lovelace is in yaml mode. My theme is still having the ha-card-border-radius.

[LiQuid_cOOled (Not really a...)]

@LiQuid_cOOled

card_mod:
      style: |
        ha-card {
          border-radius: 20px !important;
        }

I’m not seeing the same issue. It may be theme related

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr
  margin: 0px 0px 0px 0px
cards:
  - type: picture-elements
    elements:
     - type: custom:hui-element
       card_type: entities
       card_mod:
         style: |
          ha-card {
           border-radius: 100px !important;
           background: black;
           border: 3px solid red !important;
            } 
       entities:
         - sun.sun
       style:
         top: 32%
         left: 40%
    image: /local/pics/space.png
    card_mod:
      style: |
        ha-card {
          border-radius: 50px !important;
          border: 3px solid red !important;
        } 

I think testing without a theme is a good starting point.

[mousspi]

Hi, I tested using card_mod and it works. Even without “!important”.

My theme is like that (extract):

  token-size-radius-large: 18px
  token-size-radius-card: var(--token-size-radius-large)
  ha-card-border-radius: var(--token-size-radius-card)

My dashboad like that (extract):

title: Batterie
path: batterie
theme: Backend-selected
icon: mdi:battery-medium
badges: []
panel: true
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 25% 75%
      grid-template-areas: |
        "bat-0 niv-0"
        "lin-0 niv-0"
        "eca-0 niv-0"
        "niv-1 niv-1"
      mediaquery:
        "(max-width: 1200px)":
          grid-template-columns: 33.3% 33.4% 33.3%
          grid-template-areas: |
            "bat-0 lin-0 eca-0"
            "niv-0 niv-0 niv-0"
            "niv-1 niv-1 niv-1"
    cards:
#Batterie
      - type: gauge
        view_layout:
          grid-area: bat-0
        entity: sensor.battery_state
        name: Batterie
        min: 0
        max: 100
        needle: true
        segments:
          - from: 0
            color: var(--token-color-rouge-light)
          - from: 25
            color: var(--token-color-primary-light)
          - from: 50
            color: var(--token-color-primary)
          - from: 90
            color: var(--token-color-primary-light)
          - from: 98
            color: var(--token-color-rouge-light)
        card_mod:
          style: |
            ha-card {pointer-events: none;}
#Linky
      - type: gauge
        view_layout:
          grid-area: lin-0
        entity: sensor.linky_puissance_apparente
        name: Linky
        min: -9000
        max: 9000
        needle: true
        segments:
          - from: -9000
            color: var(--token-color-rouge-light)
          - from: -3850
            color: var(--token-color-primary-light)
          - from: 0
            color: var(--token-color-primary)
          - from: 3850
            color: var(--token-color-icon-secondary)
        card_mod:
          style: |
            ha-card {pointer-events: none;}

It was rounded before the update to 2024.4.X, but now it’s no more rounded:

I added the border radius to card_mod as you suggested and it works:

        card_mod:
          style: |
            ha-card {pointer-events: none; border-radius: 18px;}

Anyway, I have plenty of cards and do not want to change card_mod on each one. I’ll try to understand what changed and keep using the theme to define borders.

Do you have any idea where it can come from ???

Thanks a lot @Ildar_Gabdullin and @LiQuid_cOOled .

[LiQuid_cOOled (Not really a...)]

Can you identify what theme you are using or share a portion of the code?

[mousspi]

I use a theme called graphite that I slightly modified. Here is the full theme file:

Perso graphite:
  # Graphite is a contemporary theme featuring a calming dark color scheme,
  # native device fonts, and a cohesive design language.
  # Designed to be visually appealing and easy on the eyes, it provides a
  # consistent user experience across the entire home assistant interface,
  # including the administration interface and code editors.

  ##############################################################################
  # Tokens

  # Color tokens
  token-rgb-primary: 60, 175, 167 #229, 145, 9
  token-color-primary: rgb(var(--token-rgb-primary))
  token-color-primary-hexa: '#3CAFA7' #Le même en hexa
  token-color-primary-light: rgb(143, 207, 205) #Ajout perso
  token-color-primary-light-hexa: '#8FCFCD' #Le même en hexa
  token-color-jaune-light: rgb(243, 243, 165) #Ajout perso
  token-color-rouge-light: rgb(239, 129, 155) #Ajout perso
  token-color-accent: var(--token-color-primary)
  token-color-feedback-info: rgb(138, 208, 248)
  token-color-feedback-warning: rgb(244,180,0)
  token-color-feedback-error: rgb(229, 97, 128)
  token-color-feedback-success: rgb(93, 193, 145)
  token-color-icon-primary: rgba(228, 228, 231, 1)
  token-color-icon-secondary: rgb(138 140 153)
  token-color-icon-sidebar: rgba(147, 149, 159, 1)
  token-color-icon-sidebar-selected: rgba(174, 176, 183, 1)
  token-color-text-primary: rgba(228, 228, 231, 1)
  token-color-text-secondary: rgb(138 140 153)
  token-color-text-disabled: rgba(255, 255, 255, 0.5)
  token-color-text-sidebar-selected: rgba(214, 215, 219, 1)
  token-color-text-sidebar: var(--token-color-text-secondary)
  token-color-text-label-badge: rgb(198, 203, 210)
  token-color-background-base: rgba(22, 24, 29, 1)
  token-color-background-secondary: rgba(28, 29, 33, 1)
  token-color-background-sidebar: var(--token-color-background-base)
  token-color-background-input-base: rgba(46, 48, 56, 1)
  token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
  token-color-background-label-badge: rgba(54, 55, 67, 1)
  token-color-background-card: rgba(37, 38, 45, 1)
  token-color-background-card-light-hexa: '#505156' #Un peu plus clair en hexa
  token-color-background-skrim: rgba(0, 0, 3, 0.9)
  token-color-background-divider: var(--token-color-background-sidebar)
  token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1)
  token-color-background-label-badge-red: var(--token-color-feedback-error)
  token-color-background-label-badge-green: rgba(78, 183, 128, 1)
  token-color-background-label-badge-blue: var(--token-color-feedback-info)
  token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
  token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
  token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
  token-color-border-card: rgba(0, 0, 0, 0)

  # Opaciy tokens
  token-opacity-ripple-hover: 0.14

  # Font tokens
  token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

  # Size tokens
  token-size-radius-small: 9px
  token-size-radius-medium: 16px
  token-size-radius-large: 18px
  token-size-radius-card: var(--token-size-radius-large)
  token-size-width-border-card: 0
  token-size-height-slider: 4px
  token-size-height-navbar: 56px
  token-size-font-title: 28px

  # Weight tokens
  token-weight-font-title: 600

  ##############################################################################
  # Definitions

  # Shapes
  mdc-shape-small: var(--token-size-radius-small)
  mdc-shape-medium: var(--token-size-radius-medium)
  mdc-shape-large: var(--token-size-radius-large)

  # Sizes
  header-height: var(--token-size-height-navbar)
  paper-slider-height: var(--token-size-height-slider)

  # Typography
  primary-font-family: var(--token-font-family-primary)
  paper-font-common-base_-_font-family: var(--token-font-family-primary)
  paper-font-common-code_-_font-family: var(--token-font-family-primary)
  paper-font-body1_-_font-family: var(--token-font-family-primary)
  paper-font-subhead_-_font-family: var(--token-font-family-primary)
  paper-font-headline_-_font-family: var(--token-font-family-primary)
  paper-font-caption_-_font-family: var(--token-font-family-primary)
  paper-font-title_-_font-family: var(--token-font-family-primary)
  ha-card-header-font-family: var(--token-font-family-primary)
  mdc-typography-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-family: var(--token-font-family-primary)
  mdc-typography-body1-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-weight: var(--token-weight-font-title)

  title-font-weight: var(--token-weight-font-title)
  title-font-size: var(--token-size-font-title)

  # Text
  primary-text-color: var(--token-color-text-primary)
  secondary-text-color: var(--token-color-text-secondary)
  text-primary-color: var(--token-color-text-primary)
  text-light-primary-color: var(--token-color-text-primary)
  disabled-text-color: var(--token-color-text-disabled)

  # Main interface colors
  primary-color: var(--token-color-primary)
  dark-primary-color: var(--primary-color)
  light-primary-color: var(--primary-color)
  accent-color: var(--token-color-accent)
  divider-color: var(--token-color-background-divider)
  scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)

  # Feedback colors
  error-color: rgb(234 114 135)
  warning-color: rgb(255 219 117)
  success-color: rgb(118 214 152)
  info-color: rgb(39, 209, 246)

  # Background
  lovelace-background: var(--token-color-background-base)
  background-color: var(--token-color-background-base)
  primary-background-color: var(--token-color-background-base)
  secondary-background-color: var(--token-color-background-secondary)

  # Navbar
  app-header-background-color: var(--primary-background-color)
  app-header-text-color: var(--token-color-icon-primary)
  app-header-edit-background-color: var(--token-color-background-card)

  # Sidebar
  sidebar-icon-color: var(--token-color-icon-sidebar)
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-background-color: var(--token-color-background-sidebar)
  sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected)
  sidebar-selected-text-color: var(--token-color-text-sidebar-selected)

  # Cards
  border-radius: var(--token-size-radius-card)
  card-background-color: var(--token-color-background-card)
  ha-card-background: var(--token-color-background-card)
  ha-card-border-radius: var(--token-size-radius-card)
  ha-card-border-color: var(--token-color-border-card)
  ha-card-border-width: var(--token-size-width-border-card)
  ha-card-border-style: none
  ha-card-border: none
  ha-card-box-shadow: none

  # States
  state-icon-color: var(--token-color-icon-primary)
  state-on-color: var(--token-color-feedback-success)
  state-off-color: var(--token-color-feedback-error)

  # Label-badge
  label-badge-text-color: var(--token-color-text-primary)
  label-badge-red: var(--token-color-background-label-badge-red)
  label-badge-blue: var(--token-color-background-label-badge-blue)
  label-badge-green: var(--token-color-background-label-badge-green)
  label-badge-yellow: var(--token-color-background-label-badge-yellow)
  label-badge-grey: var(--token-color-background-label-badge-grey)

  # Chip
  ha-chip-text-color: rgb(255 255 255)

  # Dialog
  mdc-dialog-scrim-color: var(--token-color-background-popup-scrim)

  # Slider
  paper-slider-knob-color: var(--token-color-primary)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)

  # Switch
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--switch-checked-button-color)
  switch-unchecked-button-color: rgba(255, 255, 255, 0.7)
  switch-unchecked-track-color: rgba(125, 128, 132, 0.4)

  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  mdc-checkbox-unchecked-color: var(--token-color-icon-secondary)
  mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)

  # List items
  mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)

  # Text Fields an Dropdown
  input-background-color: var(--token-color-background-input-base)
  input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
  input-fill-color: var(--input-background-color)
  input-ink-color: var(--token-color-text-primary)
  input-label-ink-color: var(--token-color-text-primary)
  input-disabled-fill-color: var(--input-background-token-color-disabled)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  mdc-select-idle-line-color: var(--color-background-base)
  mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color)

  # Editor
  code-editor-background-color: var(--token-color-background-base)
  codemirror-meta: var(--token-color-text-primary)
  codemirror-property: var(--accent-color)
  codemirror-atom: var(--codemirror-property)
  codemirror-string: rgb(119 196 229)
  codemirror-keyword: rgb(140 169 255)
  codemirror-number: rgb(255 91 29)

  # RGB colors
  rgb-primary-color: var(--token-rgb-primary)
  rgb-accent-color: var(--token-rgb-primary)
  rgb-white-color: 240, 243, 255
  rgb-purple-color: 189, 157, 255
  rgb-pink-color: 255, 98, 192
  rgb-red-color: 255, 97, 116
  rgb-deep-purple-color: 166, 77, 255
  rgb-indigo-color: 84, 132, 255
  rgb-blue-color: 33, 150, 243
  rgb-light-blue-color: 3, 169, 244
  rgb-cyan-color: 0, 188, 212
  rgb-teal-color: 107, 255, 237
  rgb-green-color: 141, 253, 166
  rgb-light-green-color: 156, 255, 166
  rgb-lime-color: 205, 220, 57
  rgb-yellow-color: 255, 235, 59
  rgb-amber-color: 255, 211, 99
  rgb-orange-color: var(--rgb-primary-color)
  rgb-deep-orange-color: 255, 87, 34
  rgb-brown-color: 121, 85, 72
  rgb-grey-color: 158, 158, 158
  rgb-blue-grey-color: 96, 125, 139
  rgb-black-color: 0, 0, 0
  rgb-disabled-color: 61, 65, 85
  rgb-state-inactive-color: 123, 126, 139

  ##############################################################################
  # Extentions

  # HACS
  hacs-new-color: rgb(27 153 123)
  hacs-error-color: rgb(182 46 95)

  # Mini graph card
  mcg-title-font-weight: 400

  # Mushroom
  mush-title-font-weight: var(--title-font-weight)
  mush-title-font-size: var(--title-font-size)
  mush-rgb-white: var(--rgb-white-color)
  mush-rgb-purple: var(--rgb-purple-color)
  mush-rgb-pink: var(--rgb-pink-color)
  mush-rgb-red: var(--rgb-red-color)
  mush-rgb-deep-purple: var(--rgb-deep-purple-color)
  mush-rgb-indigo: var(--rgb-indigo-color)
  mush-rgb-blue: var(--rgb-blue-color)
  mush-rgb-light-blue: var(--rgb-light-blue-color)
  mush-rgb-cyan: var(--rgb-cyan-color)
  mush-rgb-teal: var(--rgb-teal-color)
  mush-rgb-green: var(--rgb-green-color)
  mush-rgb-light-green: var(--rgb-light-green-color)
  mush-rgb-lime: var(--rgb-lime-color)
  mush-rgb-yellow: var(--rgb-yellow-color)
  mush-rgb-amber: var(--rgb-amber-color)
  mush-rgb-orange: var(--rgb-orange-color)
  mush-rgb-deep-orange: var(--rgb-deep-orange-color)
  mush-rgb-brown: var(--rgb-brown-color)
  mush-rgb-grey: var(--rgb-grey-color)
  mush-rgb-blue-grey: var(--rgb-blue-grey-color)
  mush-rgb-black: var(--rgb-black-color)
  mush-rgb-disabled: var(--rgb-disabled-color)

[Ildar_Gabdullin]

280 lines.
If you really want to learn how to customize HA yourself - I suggest you to sort this out:

1. Check with a default theme. If everything is OK - then probably the custom theme is a reason.
2. Try to find which variable in this theme may affect border-radius (hint: it probably has a “radius” word). Try changing it - and see how it affects your UI.

This is a work which YOU have to do.
Otherwise someone will have to:

1. Install your theme.
2. Copy/paste your cards (exactly same cade) into his own HA setup - and see what is wrong.

But imho this is not about a theme.
It is about

panel: true

and these changes in 2024.4:
home-assistant/frontend#20122
home-assistant/frontend#20135
home-assistant/frontend#20264

Panel view, 2024.4: no borders & box-radius for child cards

That is why it was suggested here several times - “test with a DEFAULT theme”.

[mousspi]

I confirm that the issue is not theme related, still there with default theme.
And yes, it is only when being in panel mode AND using layout-card (whatever masonry, horizontal, vertical or grid).
After update to 2024.4.2, no change.

Sorry if I did not catch what was the default theme, I admit that I’m rapidly lost. I also understand that helping newbies like me can be painful sometimes when things are so clear for you and so dark for us ! Anyway, my intent was really not for you to check the code.
I’ll track the different topics you sent.

Thanks again.

[bkr1969 (Brian)]

It seems this is now an issue being fixed. https://github.com/thomasloven/lovelace-layout-card/issues/284

[Ildar_Gabdullin]

@bkr1969

is now an issue being fixed

This is my issue I posted above. And this does not mean the issue “is being fixed”.
It is just registered.

[olelli (Mario)]

is there any news? has anyone solved it? I deleted all the themes leaving only the original one, but I still have the cards with sharp corners, I also lost the robot card and the weather forecast… but the updates destroy instead of solving problems

[mcv93]

The situation has not changed and from what I see the maintainer does not update this card often.
Is there any alternative to this card that works after HA 2024.4.x?

[duceduc]

When you say the weather card, does it look like this now?? Last 2 months the update messed with the round corners. This months update, I noticed my weather card has been stretched like so.