u/ekam_Kabir

hello waybar experts, u can see in my waybar the the border radius of the shadow/hint of the waybar or whatever that is sharp even tho my i have set all border radius to 6 or more. Zoom in on the corner if u can't see.
HELP !!!
@import "colors.css";

* {
  all: unset;
  font-family: "JetBrainsMono Nerd Font", monospace;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
}

window#waybar {
  background: alpha(@surface, 0.75);
  border: none;
  border-radius: 9px;
  box-shadow: none;
  outline: none;
  color: ;
}

tooltip {
  all: unset;
  background: ;
  border: none;
  border-radius: 6px;
  box-shadow: none;
}

tooltip window {
  all: unset;
  background: ;
  border-radius: 6px;
}

tooltip.background {
  all: unset;
  background: ;
  border-radius: 6px;
}

tooltip label {
  color: ;
  font-weight: normal;
}

#window {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#window.empty {
  padding: 0;
  margin: 0;
  background: transparent;
}

#workspaces {
  margin: 4px;
  background: alpha(@surface_variant, 0.3);
  border-radius: 6px;
}

#workspaces button {
  padding: 0 10px;
  color: alpha(@on_surface, 0.35);
  background: transparent;
  transition: color 0.2s ease;
  font-size: 18px;
}

#workspaces button.active {
  color: ;
}

#workspaces button.urgent {
  color: ;
}

#workspaces button:hover {
  color: ;
  background: transparent;
}

#group-stats {
  padding: 0;
  margin: 0;
}

#group-stats drawer {
  transition: opacity 0.3s ease;
  opacity: 0;
  padding: 0 4px;
}

#group-stats:hover drawer {
  opacity: 1;
}

#custom-stats-toggle {
  padding: 2px 2px;
  margin: 2px 2px;
  color: ;
}

#cpu,
#memory,
#temperature {
  padding: 0 6px;
  margin: 4px 2px;
  background: alpha(@secondary, 0.15);
  color: ;
  border-radius: 6px;
}

#temperature.critical {
  color: ;
  background: alpha(@error, 0.2);
}

#custom-arrow {
  color: ;
  margin: 0 4px;
}

#custom-distro {
  padding: 0 10px 0 8px;
  color: ;
  font-size: 14px;
}

#custom-sep {
  color: alpha(@on_surface, 0.2);
  padding: 0 2px;
}

#idle_inhibitor {
  padding: 0 6px;
  color: alpha(@on_surface, 0.5);
}

#idle_inhibitor.activated {
  color: ;
}

#demo,
#stats {
  padding: 0 6px;
  margin: 4px 2px;
  background: alpha(@primary, 0.1);
  border-radius: 6px;
  color: ;
}

#tray {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.12);
  border-radius: 6px;
  color: ;
}

#tray &gt; .passive {
  -gtk-icon-effect: dim;
}

#pulseaudio {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#pulseaudio.muted {
  color: ;
}

#battery {
  padding: 0 6px;
  color: ;
}

#battery.warning:not(.charging) {
  color: ;
}

#battery.critical:not(.charging) {
  color: ;
  animation: blink 0.5s linear infinite alternate;
}

#battery.charging,
#battery.plugged {
  color: ;
}

 blink {
  to { opacity: 0.4; }
}

#network {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#network.disconnected {
  color: ;
}

#custom-rmpc {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#custom-rmpc:hover {
  background: alpha(@primary, 0.25);
}

#clock {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#custom-arrow-l {
  color: ;
  margin: 0 4px;
}

#custom-power {
  padding: 0 10px 0 6px;
  margin: 4px 4px 4px 2px;
  background: alpha(@error, 0.2);
  border-radius: 6px;
  color: ;
}

#custom-power:hover {
  background: ;
  color: u/on_error;
}
Waybar tooltip has sharp outer shadow/decoration corners despite border radius set how to fix?
