How to add rounded corners to an image using the Elementor editor

Question

This is driving me crazy. I have an image in a textbox on a simple Elementor page. It sits nicely inside the "Text Editor Widget" and I want to add rounded corners to it.

I created a CSS class in "Site Settings/Custom CSS" and then assigned the image to the class in the image editor in the text editor. .AZ-rounded-image { border-radius: 15px; } But nothing happens... Can anyone help - I wasted three hours on this... Many thanks Andy

Answer 1

Have you tried setting overflow to hidden? Does it display like below? By default overflow is visible, so if the content of .AZ-rounded-image is larger, it will overflow, making border-radiusInvisible.

.AZ-rounded-image { 
    border-radius: 15px;
    overflow: hidden;
}