Avatar's rounded border does not sit flush to the content

[georgimkv]

Bug Description

The visual specification states that the avatar has an optional border.

1. Is there a way to remove this optional border?
2. In the Horizon theme, that border is rounded, but the containing image inside is improperly clipped. Note the whitespace between the corners of the images and the border below.
3. We have a sample with a List that internally uses Avatars, and there, the optional border looks odd: https://sap.github.io/ui5-webcomponents/main/playground/components/Card/?sap-ui-theme=sap_horizon&isrtl=false

Steps to Reproduce

1. Go to 'the Avatar component page' and zoom in.
2. Sample "Basic Avatar". More noticeable on 2X screens.

Context

• UI5 Web Components version: latest
• Browser: Chrome

Log Output / Stack Trace / Screenshots

Priority

• [x] Low
• [ ] Medium
• [ ] High
• [ ] Very High

[Todor-ads]

Hi @SAP/ui5-webcomponents-topic-p

This issue is about border in Horizon theme. Could you please check?

Regards, Todor

[plamenivanov91]

It seems that we have to make the border optional too. I will discuss this with my team.

[georgimkv]

The reported issue in "...the Horizon theme, that border is rounded, but the containing image inside is improperly clipped. Note the whitespace between the corners of the images and the border below" is not fixed yet. This is caused by differences in size, but identical values for border-radius. Try to draw the border with box-shadow instead. You won't have any issues with making that "border" look rounded.

I will open a separate feature request for to make the border optional.

[georgimkv]

Hi, I can still reproduce this issue. Please check https://sap.github.io/ui5-webcomponents/main/playground/components/Avatar/