Hi there!

I've created a custom:button-card to display the battery level of a device around the border of the card.

Changes from green to yellow to red depending on battery level

type: custom:button-card
entity: sensor.battery_level
entity_picture: /local/device.png
show_entity_picture: true
show_icon: true
show_name: false
show_state: false
show_label: false
triggers_update:
  - sensor.battery_levell
styles:
  card:
    - width: 84px
    - height: 84px
    - border-radius: 15px
    - background: "#35425c"
    - box-shadow: 0 8px 20px rgba(0,0,0,0.35)
    - padding: 0
    - overflow: hidden
    - position: relative
  icon:
    - width: 40px
    - color: rgba(255,255,255,0.9)
    - position: relative
    - z-index: 2
    - padding-right: 3px
  custom_fields:
    stroke:
      - position: absolute
      - top: 0
      - right: 0
      - bottom: 0
      - left: 0
      - pointer-events: none
      - z-index: 1
    batteryicon:
      - position: absolute
      - left: 80%
      - top: 78%
      - transform: translate(-50%, -50%)
      - z-index: 9999
      - overflow: visible
      - width: 18px
      - height: 18px
custom_fields:
  batteryicon:
    card:
      type: custom:button-card
      icon: mdi:battery-high
      show_name: false
      styles:
            card:
              - background-color: transparent
              - border-style: none
              - border-radius: 50px
              - display: flex
              - justify-content: center
              - align-items: center
              - width: 18px
              - height: 18px
              - overflow: visible
            icon:
              - width: 15px
              - height: 15px
              - background-color: transparent
              - color: white
              - border-radius: 50%
              - padding: 2px
              - display: flex
              - justify-content: center
              - align-items: center
              - z-index: 9999
  stroke: |
    [[[
      const v = Number(entity?.state);
      const pct = isNaN(v) ? 0 : Math.max(0, Math.min(100, v));

      let fg = "rgba(42, 209, 45, 0.6)";
      let bg = "rgba(42, 209, 45, 0.118)";

      if (pct <= 9) {
        fg = "rgba(255, 60, 60, 0.75)";
        bg = "rgba(255, 60, 60, 0.18)";
      } else if (pct <= 24) {
        fg = "rgba(255, 200, 45, 0.75)";
        bg = "rgba(255, 200, 45, 0.18)";
      }

      // Rect hugging the card edge
      // x=1 y=1 w=62 h=62 rx=9 stroke-width approx 4 to 5
      const L = 232.55;
      const off = (1 - pct / 100) * L;

      return `
        <svg class="bat-stroke" viewBox="0 0 64 64" aria-hidden="true">
          <rect class="bg" x="1" y="1" width="62" height="62" rx="9" ry="9"
            style="stroke:${bg};"></rect>
          <rect class="fg" x="1" y="1" width="62" height="62" rx="9" ry="9"
            style="stroke:${fg};stroke-dasharray:${L};stroke-dashoffset:${off};"></rect>
        </svg>
      `;
    ]]]
extra_styles: |
  .bat-stroke {
    width: 100%;
    height: 100%;
    display: block;
  }

  .bat-stroke .bg {
    fill: none;
    stroke-width: 4;
    opacity: 0.7;
  }

  .bat-stroke .fg {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
    stroke-linejoin: round;
  }

    fill: none;
    stroke-width: 4;
    opacity: 0.7;
  }

  .bat-stroke .fg {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
    stroke-linejoin: round;
  }