[SOLVED] Dirty corners of round rectangle not smooth


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.

enter image description here

corners (not smooth):

enter image description here

other side (smoothed):

enter image description here

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

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

        id: rec
        x: 90

        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):

enter image description here

enter image description here


Using These links can help:

How do I enable antialiasing on QML Shapes?


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)

Leave a Reply

Your email address will not be published. Required fields are marked *