SOLVED: Images Don't Support Border Radius When Set to <figure>

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.

Hi Kevin,
Thanks so much for your report!

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.

Best regards,

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.

1 Like

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.

Can you share a link? I have it working on my end.

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!

1 Like

I don’t know if we’re talking past each other, but both work for me :thinking:

1 Like

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 works for me on 1.5.2. Btw, why is overflow a text input and not a select field?

1 Like

Check this out - Change overflow style to dropdown - #5 by Deanphillips

1 Like

Worked for me as well in 1.5.2.

This is what I saw in @timmse’s video and what I was able to get to work:

  1. Create Section > Container > Image
  2. Choose an image from the Media Library.
  3. Style tab > “Border/Box Shadow” > Set Border Radius.
  4. 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.

@digitalgravy Weird. Even weirder, though, is the codepen problem :thinking:

Because it’s a shorthand property that allows both directions:

Thanks for the tut. Great picture!

1 Like

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?

Best regards,

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).

Hi Jamie,
Welcome to the forum!

You can find the overflow setting under style » layout » misc:

Alternatively, you can use the search in the top right-hand corner to find a specific setting:

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.