Image border-radius

Anvil Q&A
1

How to make an image round just like the ones on anvil.works?

2

I have made a round button using anvil roles and a bit of CSS. Perhaps you could try the same thing with an image component.

Here is a clone you can use to see how it was done:
https://anvil.works/build#clone:CY6DNHMDFTTTD4HN=YJNC24DENGK3XV4HLWDPLBSH

First, create a role in the App browser under Theme -> Roles:

sc
sc.png1052×867 50 KB

Then, add some CSS to Assets:

/* circle floating button */
.anvil-role-circle-button > .btn {
  font-family:Verdana, Geneva, sans-serif;
  font-size:18px;
  background-color: %color:Secondary 500%;
  color:white;
  position:fixed;
  width:60px; /*60px */
  height:60px; /*60px */
  bottom:5vw;/*40px */
  right:3vw;/*40px */
  border-radius:50px;
  text-align:center;
  margin-top:22px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

Lastly, change the button’s role to the role you created:

sc2
sc2.png724×563 21.6 KB

I hope this helps!

3 Likes
3

what do I put for inplace of .btn?

4

Actually, you can remove the > .btn, then you’ll have a role that can make a circle or rounded border on a component (once you adjust the CSS properties as needed).

When I try this with an Image component, the corners get rounded, but the source image still has its sharp corners. I’m not sure of any other technique but perhaps others can help. Of course you could always just upload an image that is already rounded.

2 Likes
5

Worked perfectly thank you for the solution

6

You’re very welcome.

8

that works, also works with label for me

1 Like