QML : Rounded rectangle with border

Question

I have to create some "tabs" in QML which should have rounded corners at the top and a border all over it :

I managed to create the rounded rectangle by using 2 rectangles :

(the tabs are part of a listview)

 ListView {
    id: listView
    anchors.fill: parent
    orientation: ListView.Horizontal
    spacing: Math.floor(0.60 * parent.width / 100)

    model: TabsModel{}

    delegate: TabsDelegate {

        height: parent.height

    }
}

The delegate which is the actual tab :

Item {
    id: root

    width: 200

    Rectangle {
        id: topRect
        anchors.fill: parent
        radius: 5
        color: backgroundColor
        /*border.width: 1
        border.color: borderColor*/
    }

   Rectangle {
        id: bottomRect
        anchors.bottom: parent.bottom
        anchors.left: topRect.left
        anchors.right: topRect.right
        height: 1 / 2 * parent.height
        color: backgroundColor
        /*border.width: 1
        border.color: borderColor*/
    }

    Text {
        id: text
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: spaceBefore
        text: label
        color: textColor
    }
}

With this code i have the following result :

Obviously if i add the borders , i end up with with a border in the middle of my tabs :

Any ideas how i can manage to get what i want in qml ?

Answer 1

You can simply add another Rectangle (between bottomRect and text) to hide the middle border:

Rectangle {
    anchors {
        fill: bottomRect
        leftMargin: bottomRect.border.width
        bottomMargin: bottomRect.border.width
        rightMargin: bottomRect.border.width
    }
    color: backgroundColor
}