How to set a red outline border while using BorderImage

Question

I am using BorderImage to display images on a GridView.

Following is sort of what I am doing:

BorderImage {
  source: some_image
  asynchronous: true
  cache: false
}

I want to set a red outline border to my image. How can I do that ?

I looked at the Border.left, Border.right properties but they just stretch the image.

Answer 1

You add a Rectangle to your (Border)Image

BorderImage {
    source: some_image

    Rectangle {
        anchors.fill: parent
        anchors.margins: -border.width
        z: -1
        border.width: 4
        color: 'red'
    }
}