Rato of height and width of an background-image

[Gordon746]

Steps to reproduce the behavior:

I use a cover-button with Subbuttons, but want to replace the icons by an image. This works:

.bubble-sub-button-2 {
      background-image: url("/local/pictures/lamelle_offen.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;      
      ha-icon {
       color: transparent! important;
       }
}

Adding a border though by

      border-style: solid;
      border-color: red;
      border-width: 4px;

stretches the background-image in the horizontal dimensions (the height remains constant)

Expected behavior
Maybe it's not a bug but a bad coding of mine? Anyways, I can prevent the stretching by adding 'width 1px':

  ha-icon {
       color: transparent! important;
       width: 1px;
      }

YAML
So this code works, but I don't know weather this is future proof:

  .bubble-sub-button-2 {
      background-image: url("/local/pictures/lamelle_offen.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;      
      border-style: solid;
      border-color: red;
      border-width: 8px;
      ha-icon {
       color: transparent! important;
       width: 1px;
      }
}

Thank you very much! 🍻