Use border-radius: 10% for "state-badge" elements

[ildar170975]

The state-badge element is used to display an icon in some Lovelace cards.

Mainly icons have a transparent background.
Currently by default the state-badge element has a border-radius: 50% property.
It becomes visible if you apply some background-color to the state-badge:

Imagine that some entity has an entity_picture property specified.
Then we will see a picture in a circle:

For person's pictures this could be acceptable.
But what if an image represents some other stuff - an actual device, a flora etc?
Surely I may apply a border-radius: 10% style to the state-badge:

I suggest to use that border-radius: 10% style as a default style for ALL state-badge elements.
I propose to start with Entities card & Logbook card.

[KTibow]

Right now, Home Assistant uses rounded entity pictures in most places. If you want to change it to a rounded square, I'd recommend using card-mod.
Why do you want to use a rounded square instead? Could you give some reasons to change away from the current system, which is widely used?

[KTibow]

Interesting reasons. Although right now, many places are designed with circles in mind, eg chips, badges, the map.


The only place where I would want to see more of the picture would be in camera previews or icons, eg:

Human faces usually fit well into circular spaces - none of your face is cropped off in the screenshot you sent.

[KTibow]

Good point. Maybe you could move this to the forum, where more people can see it.