Border radius image

Hi,

I’m using the latest version of GeneratePress, with the following plugins: GenerateBlocks and Getwid. Just the Block Editor (Gutenberg) as Site Editor and plain pages (no templates of GP theme) for a client/costumer. PHP version: 8.3 | Latest version of WordPress

At this point I am happy with the results. I have added in the Extra CSS (trough Costumizer) and add CSS code, because I use border radius for the images (so it’s less sharp at the corners and looks more friendly) — I did this to search (Right mousebutton and click on Inspect Element) the correct selector/source of the image – with Firefox. Apparently, when I saw in CSS it was ‘wp-block-image’ as selector on the page; I start modifying in Extra CSS. The CSS below I am using and modified it (with border-radius).

.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  border-radius: 10px 10px 10px 10px; !important;
}

After that I went to the page that I add ‘wp-block-image’ via Advanced -> Extra CSS classes. The corners went less sharp, but I saw in the bottom right corner a bit white background of the image.

I think I miss something in the CSS above? How can I make that little white background at the corners go away?

I am using a container and in the container I am using two columns of Block Editor itself, with an background color. On the left side there’s text and on the right side there is an image.

Due GDPR reasons (and the site is in development locally): I cannot share the link.

Thanks!

Kind regards, Bas