DashedRectangle

import QtQuick 2.0

Item {
    width: 600
    height: 400

    Rectangle {
        id: root
        width: 400
        height: 200
        anchors.centerIn: parent

        property var dashLength: 4
        property var dashThickness: 2
        property var dashSpacing: 4


        Row {
            id: topBorder
            width: parent.width
            height: root.dashThickness
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top

            spacing: root.dashSpacing

            Repeater {
                model: topBorder.width / (root.dashLength + root.dashSpacing)
                delegate: Rectangle {
                    color: "red"
                    width: root.dashLength
                    height: topBorder.height
                }
            }
        }

        Row {
            id: bottomBorder
            height: root.dashThickness
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            spacing: root.dashSpacing

            Repeater {
                model: bottomBorder.width / (root.dashLength + root.dashSpacing)
                delegate: Rectangle {
                    color: "red"
                    width: root.dashLength
                    height: bottomBorder.height
                }
            }
        }

        Column {
            id: leftBorder
            width: root.dashThickness
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            spacing: root.dashSpacing

            Repeater {
                model: leftBorder.height / (root.dashLength + root.dashSpacing)
                delegate: Rectangle {
                    color: "red"
                    width: leftBorder.width
                    height: root.dashLength
                }
            }
        }

        Column {
            id: rightBorder
            width: root.dashThickness
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            spacing: root.dashSpacing

            Repeater {
                model: rightBorder.height / (root.dashLength + root.dashSpacing)
                delegate: Rectangle {
                    color: "red"
                    width: rightBorder.width
                    height: root.dashLength
                }
            }
        }
    }
}