Rounded Image Corners

[PsAePr]

Hi there,
i'm trying to create a rectangle with an image in it. The rectangle should have rounded corners.
My code looks like this:
@import QtQuick 2.0

Image {
id: background
source: "../background.jpg"
width: 360
height: 360
focus: true

Rectangle {
    id: rectangle
    x: 30
    y: 30
    width: 300
    height: 300
    color: "#ffffff"
    radius: 20
    border.width: 5
    border.color: "#000000"

    Image {
        id: image
        width: 300
        height: 300
        source: "../example.jpg"
    }
}

}@

My problem is, that the image is still an rectangle without rounded corners.
Does anyone know how to fix that?

[andre]

Enable clipping on the rectangle.

[PsAePr]

Hi Andre,
thanks for your reply.
However enabling clipping sadly did not solve the problem.

This is the updated code:
@import QtQuick 2.0

Image {
id: background
source: "../background.jpg"
width: 360
height: 360
focus: true

Rectangle {
    id: rectangle
    x: 30
    y: 30
    width: 300
    height: 300
    color: "#ffffff"
    radius: 20
    border.width: 5
    border.color: "#000000"
    clip: true

    Image {
        id: image
        width: 300
        height: 300
        source: "../example.jpg"
      
    }
}

}
@

Do you have an idea how to fix this issue?