How do I get the borders of cards, on a custom button card, round?

Configuration Frontend
1

So I saw a video to get the perfect placement for every card on your dashboard. What it basicly does is: you have one big custom button card and on that card you can put other cards. This is really usefull but there’s one problem. I can’t get the borders of the cards I add on the custum button card round.
Here is my code:

type: custom:button-card
theme: none
show_state: false
tap_action:
  action: none
custom_fields:
  buiten:
    card:
      type: custom:mushroom-template-card
      primary: Buiten
      secondary: ""
      icon: mdi:flower-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  badkamers:
    card:
      type: custom:mushroom-template-card
      primary: Badkamers
      secondary: ""
      icon: mdi:shower-head
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  living:
    card:
      type: custom:mushroom-template-card
      primary: Living
      secondary: ""
      icon: mdi:sofa-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  Kamer_Mama-Papa:
    card:
      type: custom:mushroom-template-card
      primary: Kamer ouders
      secondary: ""
      icon: mdi:bed-king-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  Kamer_Floris:
    card:
      type: custom:button-card
      icon: mdi:bed-queen-outline
      entity: none
      name: Kamer Floris
      styles:
        card:
          - height: 60px
          - width: 160px
        name:
          - position: absolute
          - font-size: 17px
          - left: 30%
          - top: 35%
        icon:
          - position: absolute
          - height: 30px
          - left: "-3%"
          - top: 20%
  Kamer_Elias:
    card:
      type: custom:mushroom-template-card
      primary: Kamer Elias
      secondary: ""
      icon: mdi:bed-single-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  header_time:
    card:
      type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: short
      timeFormat: HH:mm
      timeZone: Europe/Brussels
styles:
  card:
    - padding: 22px
    - align-self: start
    - width: 1000px
    - height: 1000px
    - opacity: 1
    - background-color: transparent
  custom_fields:
    buiten:
      - position: absolute
      - left: 365px
      - top: 330px
      - width: 160px
      - height: 60px
      - background: none
      - background-color: var(--active-small)
      - border-radius: 24px
    badkamers:
      - position: absolute
      - left: 200px
      - top: 330px
      - width: 160px
      - height: 60px
    living:
      - position: absolute
      - left: 365px
      - top: 265px
      - width: 160px
      - height: 60px
    Kamer_Mama-Papa:
      - position: absolute
      - left: 200px
      - top: 265px
      - width: 160px
      - height: 60px
    Kamer_Floris:
      - position: absolute
      - left: 200px
      - top: 200px
      - width: 160px
      - height: 60px
      - background-color: transparent
      - border-radius: 30px
    Kamer_Elias:
      - position: absolute
      - left: 365px
      - top: 200px
      - width: 160px
      - height: 60px
    header_time:
      - position: absolute
      - left: 100px
      - top: 10px
      - background: none
  name:
    - justify-self: start
    - align-self: start
    - font-size: 24px
    - font-weight: 500
    - color: white

And then this is how it looks:

image
image1451×502 14.2 KB

Now I want to get the borders of these ‘tiles’ round but I can’t.
If you know a solution please help me.
Thanks!

2

You are imbedding Mushroom cards in the button card. This means you have to apply the change to the Mushroom card with card_mod

  badkamers:
    card:
      type: custom:mushroom-template-card
      primary: Badkamers
      secondary: ""
      icon: mdi:shower-head
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
      card_mod:
       style: |
         ha-card {
          border: 1px solid red;
          }

Your first card is a button card so the menthod is differnt

  Kamer_Floris:
    card:
      type: custom:button-card
      icon: mdi:bed-queen-outline
      entity: none
      name: Kamer Floris
      styles:
        card:
          - height: 60px
          - width: 160px
          - border: 1px solid green

image
image544×380 14.8 KB

3

Thanks for answering!
So i tried this and it didn’t work😔
Here’s the code:

type: custom:button-card
theme: none
show_state: false
tap_action:
  action: none
custom_fields:
  buiten:
    card:
      type: custom:mushroom-template-card
      primary: Buiten
      secondary: ""
      icon: mdi:flower-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  badkamers:
    card:
      type: custom:mushroom-template-card
      primary: Badkamers
      secondary: ""
      icon: mdi:shower-head
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
      card_mod:
        style: |
          ha-card {
           border: 1px solid red;
           }
  living:
    card:
      type: custom:mushroom-template-card
      primary: Living
      secondary: ""
      icon: mdi:sofa-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  Kamer_Mama-Papa:
    card:
      type: custom:mushroom-template-card
      primary: Kamer ouders
      secondary: ""
      icon: mdi:bed-king-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  Kamer_Floris:
    card:
      type: custom:button-card
      icon: mdi:bed-queen-outline
      entity: none
      name: Kamer Floris
      styles:
        card:
          - height: 60px
          - width: 160px
          - border: 1px solid green
        name:
          - position: absolute
          - font-size: 17px
          - left: 30%
          - top: 35%
        icon:
          - position: absolute
          - height: 30px
          - left: "-3%"
          - top: 20%
  Kamer_Elias:
    card:
      type: custom:mushroom-template-card
      primary: Kamer Elias
      secondary: ""
      icon: mdi:bed-single-outline
      fill_container: true
      tap_action:
        action: navigate
        navigation_path: /dashboard-absolute/test
  header_time:
    card:
      type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: short
      timeFormat: HH:mm
      timeZone: Europe/Brussels
styles:
  card:
    - padding: 22px
    - align-self: start
    - width: 1000px
    - height: 1000px
    - opacity: 1
    - background-color: transparent
  custom_fields:
    buiten:
      - position: absolute
      - left: 365px
      - top: 330px
      - width: 160px
      - height: 60px
      - background: none
      - background-color: none
      - border-radius: 24px
    badkamers:
      - position: absolute
      - left: 200px
      - top: 330px
      - width: 160px
      - height: 60px
    living:
      - position: absolute
      - left: 365px
      - top: 265px
      - width: 160px
      - height: 60px
    Kamer_Mama-Papa:
      - position: absolute
      - left: 200px
      - top: 265px
      - width: 160px
      - height: 60px
    Kamer_Floris:
      - position: absolute
      - left: 200px
      - top: 200px
      - width: 160px
      - height: 60px
      - background-color: transparent
      - border-radius: 30px
    Kamer_Elias:
      - position: absolute
      - left: 365px
      - top: 200px
      - width: 160px
      - height: 60px
    header_time:
      - position: absolute
      - left: 100px
      - top: 10px
      - background: none
  name:
    - justify-self: start
    - align-self: start
    - font-size: 24px
    - font-weight: 500
    - color: white

and then this i how it looks:

image
image989×440 12.5 KB

But thanks anyway.

4

Just add border-radius: 24px; to the mod

      card_mod:
        style: |
          ha-card {
           border: 1px solid red;
           border-radius: 24px;
           }

And this for the button card

  Kamer_Floris:
    card:
      type: custom:button-card
      icon: mdi:bed-queen-outline
      entity: none
      name: Kamer Floris
      styles:
        card:
          - height: 60px
          - width: 160px
          - border: 1px solid green
          - border-radius: 24px
5

YES! It works!
Thanks so much.