[SOLVED] Dirty corners of round rectangle not smooth

Issue

I have simple rounded rectangle but like 4 side or like draw circular with radius: width/2 the 4 corners are not smooth. I add some effect like Gaussian blur but can not handle that.
I tried with Bezier curve but I had some issues. As you can see these images the dirty of corners is obviously.

corners (not smooth):

other side (smoothed):

Window {
    id: window
    width: 401
    height: 400
    visible: true
    
    color: 'gray'   

    Slider{
        id: slider
        from: 1
        to: 5
        onValueChanged: console.log("value :"+value)
    }

    Rectangle{
        id: rec
        x: 90
        y:150

        color: 'transparent'
        border.color: "#262626"
        border.width: 1

        width: Math.round(parent.width * .5)
        height: Math.round(width*.6)

        radius: 10
        layer.enabled: true

    }
    GaussianBlur {
        anchors.fill: rec
        source: rec
        radius: 2
        samples: 30
        deviation: 1
        clip: true
    }

}

My propose is 👇 (draw with Adobe Illustrator):

Solution

Using These links can help:

How do I enable antialiasing on QML Shapes?

https://doc.qt.io/archives/qt-5.9/qml-qtquick-pathsvg.html

Using SVG curves to imitate rounded corners

QML – How to load SVG DOM into an Image

SVG rounded corner

How are angles on QPainterPath::arcTo interpreted?

But my best recommend use qNanoPainter you can draw any narrow line with add blur on it in c++ and call it in qml.

Answered By – S At

Answer Checked By – Marilyn (BugsFixing Volunteer)