How to create a circle with border and background-image?

Iโ€™d like to create responsive circles with a golden border and a background-image. But when trying different versions of Container with 50% border-radius, it looks rather like an oval than a round circle:

Could you please teach me how to do this properly?

Thanks in advance :slight_smile:

If there is no content in the column you can set the spacing to โ€œ100% 0 0 0โ€ and that will make the height equal to the width.

In some cases the โ€œproperโ€ way would be to use an image block instead of a background image. This article explains why you might chose one method over the other HTML img vs CSS background-image | Build Awesome Websites

To do that you would need to set the column spacing to 0, use a square image size, select the Circular image style, and add some CSS to remove the bottom margin on the image inside these columns. You might add a class to the grid of no-image-spacing and add the CSS .no-image-spacing .wp-block-image { margin-bottom: 0; }

1 Like