Border radius not matching background image of column

[The_Capture_Factory]

I have cornerstone column with a boarder and a radius on that border, but i then get the gap shown in the image

how do i get rid of the gap

thanks in advance

[ruenel]

Hello @The_Capture_Factory,

Thanks for posting in!

Your Border Radius for the image and the Column or Container should NOT be the same. They should have a difference of at least the amount of bend for the inside radius. For example element structure:

Row (no border)
   Column (border: red, radius: 16px)
       Div (border: blue, radius: 12px)
           Image (border: green, radius: 8px)

Both the DIV and Column Overflow settings should be “hidden”.

Hope this makes sense.

[The_Capture_Factory]

Hi @ruenel

Just to clarify. This is created using Cornerstone controls only. There is no custom CSS . I have used a row with a column. The column has a background image and a border and border radius. Nothing else has been adjusted from the default.
Are you saying i need to set custom css on the column to correct this ?

many thanks for your advice

[prakash_s]

Hello @The_Capture_Factory,

In order to help you with your concern, we need to check your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[prakash_s]

Hello @The_Capture_Factory,

I checked your settings, and it seems that you have set the Div element as hidden. You need to enable it, clear your browser cache, and recheck it again.

Thanks

[The_Capture_Factory]

Hi @prakash_s

I put the absolute positioned div in as a work around. As you can see from the section below on the page when you put a background image into a column and put a border on the column you get the undesired effect. I hid the div on purpose to demonstrate the issue.

Are you saying that using a cornerstone column to create the effect (without adding an absolute positioned div over the top) won’t work. This seem like a bug to me if cornerstone allows you to add a border but doesn’t handle a background image.

[ruenel]

Hello @The_Capture_Factory,

This isn’t a bug. If you only add the background image to the Column, the Column’s default background color must be the same as the border color.

If you noticed that the bend is a bit fatter compared to the rest of the border. That is because of the placement of the background image with respect to the Column element.

The best way to apply the rounded right border is to use a separate DIV element where you insert your background image, just like what you have set up in your Column 3.

Even if you increase the border width or border radius, you won’t see any white space around the inside bend with this setup.

Hope this helps.

[The_Capture_Factory]

Hi @ruenel

Thanks for the clarification.

many thanks
Richard

[prakash_s]

You are most welcome, Richard.