Avatar with image and shape="circle" doesn't have border-radius style

[vokic]

Describe the bug

In p-avatar component the picture is displayed, but the shape="circle" property doesn't work (it generates a square image, which is the default option according to the documentation).

The images in the documentation are rounded by themselves (transparent corners) so it seems they are rounded by shape="circle":

Easy fix is using inline [style]="{ overflow: 'hidden', 'border-radius': '50%' }" to achieve the wanted outcome.

Can anyone look into that. The same issue was present in PrimeReact (primefaces/primereact#1773), and fixed by what seems as an easy fix. Can it be done in PrimeNG?

Thanks!

Environment

Primeng: 16.7.1,
Angular: 16.2.8,
Windows 10,
Chrome: 119.0.6045.159,
VSCode: 1.84.2

Reproducer

No response

Angular version

16.2.8

PrimeNG version

16.7.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.1

Browser(s)

Chrome: 119.0.6045.159

Steps to reproduce the behavior

<p-avatar
[image]="imageurl.jpg"
size="normal"
shape="circle"
>

Expected behavior

Expected rounded corners, but no style is applied with shape property.

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer?

[SoyDiego]

I think is working ok. I tried with this image (square) and I can see perfectly rounded:

Here the test code:

<div class="card flex justify-content-center gap-2">
   <p-avatar image="https://www.purina.es/sites/default/files/styles/ttt_image_690/public/2021-01/Basset%20Bleu%20De%20Gascogne1.webp?itok=Xj0bIelA" shape="circle"></p-avatar>
   <p-avatar label="T"></p-avatar>
</div>

[vokic]

You are correct, it's on my part. The property is strikethrough. Something somewhere is overriding it...

[SoyDiego]

You are correct, it's on my part. The property is strikethrough. Something somewhere is overriding it...

You can close the issue if it's solved it. :)

[der-tobi]

I'm encountering the same problem.

You are correct, it's on my part. The property is strikethrough. Something somewhere is overriding it...

The something in my case is the material light compact template which does not have Layered CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,