Border radius on image in markdown card

Configuration Frontend
1

Im using a markdown card to display the image of the last person that rang the bell. Because the name of that picture is stored in a helper, I combine this with the path. Unfortunately this can not be done in a standard picture card, but it is working fine in a markdown. (see my code below)

type: markdown
content: >-
  ![Image](https://myserver/local/snapshots/{{states("input_text.camera_image")}})

Just for visual apearence, I like to give the images rounded corners, like I did with the camera views. For the camera views, I used this card mod code:

card_mod:
  style: |
    ha-card {
      border-radius: 10px;
      overflow: hidden;
    }

However, this seems not to work with the markdown, because it only styles the outer card, not the (image) contents.

Any ideas how to solve that?

2

You should apply a card-mod code to a PARTICULAR image element, not to ha-card. Use Code inspector (F12 in Chrome, in your browser it can be called differently) to find out a path to a needed element.

3

I am aware of that. Also discovered HA isn’t very consistent of using CSS classes or obect names that can be used for styling, not mentioning the shadow dom making it bit more complex. I did’nt succeed on this one and was hoping someone discovered a fix

4

Sorry, I am not getting.
Have you tried using card-mod with a valid path?