Website image corner radius doesn't work

Marketing & Content Hub Blog, Website & Page Publishing
1

As you can see in the images below, the corner radius of 24 px is shown in the image, but it doesn’t actually bend the corners as it should. I have this problem with every image on my website, and even when I publish a page, the corners are still the same. Did anyone else have this problem too?

NickRensen_0-1686649369408.jpg
NickRensen_0-1686649369408.jpg512×256 24.9 KB

NickRensen_1-1686649387219.png
NickRensen_1-1686649387219.png405×389 16 KB

This is how it looks when I view the page in my browser:

NickRensen_0-1686649695723.jpg
NickRensen_0-1686649695723.jpg421×582 50 KB

2

Hey @NickRensen my guess is that there’s some css in the theme’s stylesheets overriding this, do you have a link to a page that’s showing this by any chance and I can take a look?

3

Hi @TomM2, thanks for your reply! Yes, this is the link: VerenigingsVoordeel Lagom website (hubspotpagebuilder.eu)

4

Thank you! Interesting, it appears to be applying the border radius, but to the container and not the image.

TomM2_0-1686660841293.png
TomM2_0-1686660841293.png2758×730 512 KB

Is this the default image module you’re using or is this a custom module?

One quick workaround would be to add custom css to the head of your page something like:
span#hs_cos_wrapper_dnd_area-module-16_ img.hs-image-widget { border-radius: 24px; }

If it is the default module however that does seem to be an issue with HubSpot.

5

Hmm, okay, thanks for looking into it!

I have checked, and it happens with the default image module as well as custom modules that have images in them.

Do you recommend using the workaround to resolve this problem? Will this work for default modules and custom modules?

Or should I contact the theme builder and see if they can resolve this issue?

6

Funnily enough I’m actually working on a client’s website right now where I have the exact same problem! The radius is being applied to a container.

If it’s happening in the default module @MiaSrebrnjak this seems like it would be an issuse with HubSpot.

7

Thanks for flagging @TomM2 and for creating this post @NickRensen!

I’m looking into this! :eyes: I’ll update this thread with my findings asap!

Thanks,

Mia, Commumity team

8

Thanks Mia! just FYI I can recreate this so I’m going to open a ticket with support too!

9

@TomM2 Yeah, very strange. If you find a solution, please let me know!
I will try to contact Hubspot, but I still have a free account, so I am not sure if I can haha. Otherwise, I solve this later.

10

Hi @MiaSrebrnjak @TomM2, does anyone of you have an update on this problem? Is there something I can do to solve this on my website?

11

@NickRensen you can solve it currently by adding custom css to the site (mentioned the code in my initial comment).

I opened a ticket with HS support who told me is was “works as designed” but I’m pushing back a bit since I don’t see any reason why you’d want a completely useless border radius field if it was designed that way.

12

I was able to fix this issue with CSS but this solution still allows the border-radius property to be edited with the Styles tab of the Image block:

.hs_cos_wrapper_type_module.widget-type-linked_image img {
	display: block;
}

.hs_cos_wrapper_type_module.widget-type-linked_image {
	overflow: hidden;
}

Adding overflow:hidden to the container where the border-radius CSS property is applied ensures that it actually rounds the corners.

Setting the <img> inside the tag to block ensures that there isn’t at the gap at the bottom. In my case, they were “inline” by default and most browsers will cause the container to have some added space at the bottom, thus causing the bottom corners to not show the rounding.

I always use the Boilerplate theme from Hubspot by default… so for the life of me I can’t understand how not showing the effect from the Styles tab is the intended effect…