Trouble with empty pixels with rounded corners

Need help
1

Basically this is what i can’t get rid off… Notice the empty pixels at each border.

image

Any ideas/suggestions would be appreciated! (JS or CSS solutions also welcome)

Thanks! :wink:

2

Can you try making them the same border radius?

3

They are not separate elements… this is just an image with its border property set to radius of 10… :frowning:

4

Can you take a screenshot of the editor config for this?

5

Thanks! I ended up finding a workaround with CSS…

Here is the solution for others:

  1. Add a border to your element or image. Make the border fully transparent.
  2. Install Classify plugin (free)
  3. Add the following code to the HTML section of your page header. (Adjust color and opacity to your liking).
<style>
.full-border{ 
   background: rgb(255, 255, 255, 0.5);
</style>
  1. Add {addClass: "full-border"} as the ID of your element or image

That’s it… if Bubble would expose the background property of an image this wouldn’t be necessary… :wink: