Round popup corners

Add the code below to Custom CSS field on your Popup widget’s Settings tab:

.global-styles, [class^="WidgetBackground__Container"] {
  border-radius: 10px !important;
}

Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions :slightly_smiling_face:

1 Like

Thanks, Helga! I love to try these things! Just tested and the code also responds to using the % sign, which changed at 50% my Easter popup into an egg!!!

LOL, with this code provided, it must also be possible to give a radius for each corner, to make it even more egg-ish. And if you would use a bit of code to set the height and width of the popup to be equal, you would create popups in a perfect circle shape!

I might now adjust my popup so that the text element fits into the egg shape and then use this code to create an egg for my Easter popup :joy:. So back to Photoshop first to make sure the text will not be cut off as on the first try that I just did! Because I have ‘developed’ my very own way of using the widget, not creating it in Elfsight but in Photoshop for more control over how it looks. I then clip the image in Photoshop into bottom part and top part, and import it as a two separate pictures. Elfsight makes the pictures fit together seamlessly! I then leave the top picture without a link (so people do not accidentally click a link if they were only clicking the close button, and I link the bottom picture to where they are supposed to go. Usually, there is a button in my design, but obviously, my button created in Photoshop doesn’t really work as a button unless I add a picture link. Works well for me, but maybe not for people who don’t routinely create visuals in Photoshop.

@Ingrid_van_Waard Thank you for the feedback!

I agree that this solution may not work for all cases. However, if you need more specific customization, simply let us know your use case, and we’ll do our best to help you :slightly_smiling_face: