I believe <figure> elements lack support for border radius in CSS (I believe - hard to find exactly documentation on this).
If this is the case (it appears to be when tested in Codepen), when a Bricks user sets an image to display as <figure>, Bricks is going to need to change style targeting for certain things (e.g. border radius).
If a class of .my-image is set on a <figure> in Bricks with a border radius of 50%, the CSS output of Bricks should be .my-image > img {border-radius: 50%;}. Right now, it tries to apply the border radius directly to the <figure> which doesn’t work.
The figure tag supports border-radius. However, since only the figure tag and not the image receives the radius, the image overflows the tag, and therefore the radius is not visible.
The easiest solution for you as a user is to set the overflow to hidden if your image uses a tag.
However, since this is also the case in pure html/css if the radius gets applied to the tag, the question is whether a “fix” is necessary or a bonus.
As an alternative to your suggestion, .brxe-image img { border-radius: inherit; } would also work.
I agree. This is an expected result since the image tag is wrapped around the figure tag. Perhaps you could add one of those blue notices and explain this? Just a thought.
Border radius doesn’t work on figures in codepen… is there a reason why?
Also, setting overflow hidden in Bricks on the image/figure does nothing. Setting overflow hidden on figure in codepen when trying to use border radius also does nothing.
I think a quick Loom might clear up a lot of things, on either side of the conversation. Seems that there is a bit of “talking past” going on. Might help get to a solution faster!
I followed your video exactly and it simply doesn’t work on my install. 1.5.2. I tried with both a class as well as doing the styling at the ID level. No border radius whatsoever.
This is what I saw in @timmse’s video and what I was able to get to work:
Create Section > Container > Image
Choose an image from the Media Library.
Style tab > “Border/Box Shadow” > Set Border Radius.
Style tab > Layout > Misc > Set Overflow to “hidden”.
I needed to do a “hard refresh” in the browser to get it to show up on the frontend though. It wouldn’t show up no matter how many times I “regular” refreshed. So that may be something to look into.
Hello @digitalgravy , have you been able to solve your problem?
There doesn’t seem to be a problem for the other users, so I’d like to mark the thread as solved. Agreed?
I’m way late to the party here, but (and I couldn’t find the overflow: hidden setting in Bricks - I’m fairly new to Bricks), but I tried Content → Mask → Circle and it worked (so far but I’m just about halfway thru Dave Foy’s masterclass on intro to Bricks).
As I already replied to your e-mail: the image mask is currently not a real alternative, as its styles are output inline. I have created an improvement task for this.
