Can we make a floating label with a custom css border

the closest i was able to get was

ion-item.item-has-focus {
    ion-label.label-floating {
        padding: 0px 5px;
        margin-top: -22px;
        background: var(--ion-color-light);
        color: var(--ion-color-danger);
        position: fixed;
    }
}

just have the background property here match the parent background color and the color property to match the border
looks like you have a different background color than input background color, so you may want to try a linear gradient instead of a single color background