Border radius not matching background image of column

Support
#1

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

image
image715×481 121 KB

#2

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.

#3

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

#4

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

secure-note
secure-note1040×250 15.3 KB

Thanks

#5

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

#6

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.