Border-Radius on Images

Anvil Q&A
1

How do you apply border-radius on images components?

I’ve tried creating a role and apply to the image component but it didn’t work.

I saw another forum post asking this but didn’t see an answer.

2

If I put this into my CSS:

.anvil-role-rounded
{
  border-radius: 10px;
}

And setup a role for it that can apply to Image, when I apply that role to an image I get this result:

image

Without seeing a clone of what you’re doing it’s hard to know why it isn’t working.

3

Thank you!

After playing round with it more, I realized that it would only apply with the display mode zoom to fill.

1 Like
4

I think Anvil should make it an official property of component. Shouldn’t be a problem I guess since you can build your own custom component having this property using just 2 lines of code.