ox_inventory
ox_inventory copied to clipboard
[SUPPORT/QUESTION] Issues with Applying Backdrop Blur Filter Alongside Border Radius
I'm having trouble getting the backdrop blur filter to work with border-radius in CSS. The blur effect is not following the rounded corners set by border-radius, making the element's background blur uniformly across its entire area. How can I make the blur effect adhere to the element's curved edges?
.context-menu-list {
color: #fff;
background-color: rgba(10, 10, 10, 0.25);
backdrop-filter: blur(10px);
min-width: 100px;
padding: 4px;
border-color: #0003;
border-style: inset;
border-width: 1px;
border-radius: 10px;
outline: none;
display: flex;
flex-direction: column;
}
.tooltip-wrapper {
pointer-events: none;
display: flex;
color: #fff;
background-color: rgba(10, 10, 10, 0.25);
backdrop-filter: blur(10px);
width: 200px;
padding: 8px;
flex-direction: column;
min-width: 200px;
font-family: Saira;
border-radius: 4px;
border-color: #0003;
border-style: inset;
border-width: 1px;
}