Overflow hidden option doesn't work on rounded elements

Bugs
1

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

Screenshot_1
Screenshot_1880×501 102 KB

Others

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

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
3

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

1 Like