How to change border color of focused window

Platform
3

This is as far I have come by followoing Adding color to borders gnome windows.

_add_orange_border_to_window = function (win) {
        if (!win) return;

        let actor = win.get_compositor_private().get_parent();
        if (!actor) return;

        if (!borders[win]) {
            borders[win] = new St.Bin({
                style_class: 'border'
            });
            actor.add_child(borders[win]);
            global.window_group.set_child_above_sibling(borders[win], actor);
        }

        const BORDERSIZE = 3;

        function redrawBorder() {
            let rect = win.get_frame_rect();
            borders[win].set_position(rect.x - BORDERSIZE, rect.y - BORDERSIZE);
            borders[win].set_size(rect.width + 2 * BORDERSIZE, rect.height + 2 * BORDERSIZE);
        }

        redrawBorder();

        // Connect to the size-changed and position-changed signals
        signalHandlers[win] = {
            sizeChangedId: win.connect('size-changed', redrawBorder),
            positionChangedId: win.connect('position-changed', redrawBorder),
            restackHandlerID: global.display.connect('restacked', restack),
            unmanagedId: win.connect('unmanaged', () => {
                actor.remove_child(borders[win]);
                win.disconnect(signalHandlers[win].sizeChangedId);
                win.disconnect(signalHandlers[win].positionChangedId);
                win.disconnect(signalHandlers[win].restackHandlerID);
                win.disconnect(signalHandlers[win].unmanagedId);
                delete borders[win];
                delete signalHandlers[win];
            })
        };

        function checkMetaWindow(child){
            let metaWindow = null
            try {
                metaWindow = child.get_meta_window()
            } catch (error) {
                log(error)
            }

            if (!metaWindow) return false;

            let type = metaWindow.get_window_type()

            if (
                type != Meta.WindowType.NORMAL &&
                type != Meta.WindowType.DIALOG &&
                type != Meta.WindowType.MODAL_DIALOG
            ) return false;

            return metaWindow
        }

        function restack(display){
            global.window_group.get_children().forEach(
                (child) => {
                    let metaWindow = this.checkMetaWindow(child);

                    if (!metaWindow) return;

                    let window = metaWindow.get_description();

                    global.window_group.set_child_above_sibling(borders[window], child);
                }
            )
        }
    }

The issue is the same as linked post. when drawing multiple borders all the borders seems to be on top of all the windows. The borders doesn’t be have as normal windows.

Please Help.