[Question] Rounded bottom corners with waybar

[guttermonk]

Trying to put the final touches on my waybar and I was wondering how do you add an inside radius to the bottom corners of the waybar? Similar to this screenshot:

Same question asked on reddit, but no correct answers posted yet. Any help is greatly appreciated.

[LukashonakV]

Hi @guttermonk , see my waybar styling. Viktar's dot

window#waybar {
    background-color: @base01;
    border-bottom: 1px solid #181825;
    border-radius: 50px;
    transition-property: background-color;
    color: @base02;
}

[guttermonk]

Hi @LukashonakV, thank you for trying to help, but that css just gives a pill shaped rounded corner. That doesn't look anything like the screenshot above.

[guttermonk]

I've tracked the reference screenshot down:
https://lemmy.ml/post/11795990
https://github.com/Serpentian/AlfheimOS

Not sure where the waybar css file is in all these Nix dotfiles though.

[nobe4]

FWIW, I have found a way to do this like so:

#privacy-item {
	padding: 2px;
	border-radius: 100px;
	box-shadow: 0 -5px @bg inset, 0 5px @bg inset;
}

@bg needs to be defined somewhere, and all the px values are "best guesses", but that does what I want :)