"Inverse" border in eww widget

[LamprosPitsillos]

Does anyone know how to achieve something like this ( the area with red ) with gtk-css ?
I am using eww and i want to make it seem like a smooth transition from bar to nothing.

(defwidget smooth_bar []
(box 
        :orientation "h"
        (box :orientation "h" :style "background-color: red;"
            (box :orientation "h" :style "background-color: white; border-radius: 0px 25px 0px 0px;" )
        )
        (bar)
        (box :orientation "h" :style "background-color: transparent; border: 5px solid black; border-radius: 25px 0px  0px 0px;")

    )
)

The code for the example

[LamprosPitsillos]

(defwidget smooth_bar []
(box ;; :space-evenly false
        :orientation "h"
            (box :orientation "h" :style "background-color: transparent; border-radius: 0px 15px 0px 0px;box-shadow: #1A1B26 10px -10px;" )
        (bar)

    ))