Hello Everyone
I just found out that border-radius does nothing when applied to an Image element. The border is drawn with rounded corner but the image ignores it.
I find it surprising since it works when used with a background image. Are there any way to get rounded corners on an Image?
Thank you very much.
For the image class, the image is part of the content of the element, which mean you’ll need to have overflow:hidden on the image to mask its content. Note that this has a couple of drawbacks. The masking for a rounded rect will use the stencil buffer, which is less efficient. Also, the mask won’t be anti-aliased, also because of the stencil buffer.
When using rounded corner on a background image, the background itself will be tessellated differently to produce anti-aliased rounded corners. This is a better option in most situations.
Hello mcoted3d.
Thank you very much for your answer. I didn’t think of setting overflow:hidden. That fixes the issue.
The reason I’m using an image instead of a background image is because I am using the sourceRect property to display only a region of a bigger atlas texture. As far as I know there is no way to do this with background images. Is that right?
That’s correct.
Well, you could also generate your own mesh with generateVisualContent, but you would have the same masking issues as the Image class.
Hi, you can also use the background-image with backgroud-size/background-position in the uss:
uss:
.part_of_image
{
background-size: 100px 100px;
background-position: left -25px top -25px
}
The VisualElement size is 50x50.
The image size is 100x100.
This will show the inside of the image, you can adjust the backgroud-size and background-position to you needs.
Thank you ncerone. Your solution works even better.
Will these options be added to the editor at some point?