I am trying to work out from the documentation how to add the simple CSS styling
border-radius: 50%;
to an image.
It is simple to define a new role.
But not at all clear how to link the role and theme.css
theme.css contains elements named anvil-role-“whatever”. does that mean I simply add
anvil-role-rolename { _
_ border-radius: 50%;
}
to theme.css?
Yes, it’s that simple 
Then you add the role to the component in the IDE (or programmatically).
Thanks David, but I can’t see how to do the last bit.
The IDE Appearance tab shows role: Not Available
I’ve called the image grav and the role avatar
So in
def grav_show(self, **event_args):
“”“This method is called when the Image is shown on the screen”""
self.grav.role = “avatar”
pass
changes nothing. Output is empty
Ah, have you created the role in the IDE as well? In the app browser, under “Theme” there’s a link called “Roles”. Add the role there (you only need give it the name, not the anvil-role- bit)
That allows you to set the roles for components in the IDE.
If that still doesn;t work - could you share a simple project and I’ll take a look?