Overflow hidden option doesn't work on rounded elements

What do you want to achieve?

I want to add a container with rounded corners and place an image inside it. The goal is for the image to be constrained within the rounded corners, with any overflow hidden, so that the image respects the container’s rounded shape.

What have you tried so far?

I added the container, applied rounded corners, and set the overflow visible to false. However, the image inside the container still displays outside the rounded corners, particularly where the edges should be clipped. The overflow visible only seems to affect the container’s straight edges, not the rounded sides.

Screenshot or video

Others

  • SquareLine Studio version: 1.4.2
  • Operating system: Windows 11
  • Target hardware: ESP32-S3 240x280

There’s an LVGL style-property that you can set inside STYLE/‘Background’ section: “Clip corner”. If you turn that on the overflow should be constrained by the rounded corner accordingly.

1 Like

Thank you so much! :heart:
That completely solved my problem.

1 Like