Border-Radius Not Working on IOS Despite Using Webkit - css

Question

No matter what I do, I cannot seem to get the border radius to work on IOS devices. I have tried inline-styling, webkit, and so forth.
Here is a sample of my html and css
.border-radius {
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
.border-radius2 {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.nav-menu {
background-color: rgba(178, 214, 222);
display: flex;
gap: 1.25rem;
padding: 1rem 0;
}
.btn {
padding: 0.35rem 1.1rem;
}
.btn-effect {
border: 1px rgba(255,255,255,0) solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-effect:hover {
border: 1px rgba(255,255,255,.25) solid;
box-shadow: inset 0 0 15px rgba(221, 176, 213, 0.75), 0 0 15px rgba(221, 176, 213, 0.4);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 12px;
}
.btn-effect:active {
box-shadow: inset 0 0 15px rgb(221, 145, 206), 0 0 15px rgba(221, 176, 213, 0.4);
outline-color: rgba(255, 255, 255, .25);
outline-offset: 0px;
}
li {
list-style: none;
}
<ul class="nav-menu" id="nav-menu-one">
<li class="nav-item btn btn-effect border-radius">Home</li>
<li class="nav-item btn btn-effect border-radius">Menu</li>
<li class="nav-item btn btn-effect border-radius2">Pics</li>
<li class="nav-item btn btn-effect border-radius2">Events</li>
</ul>
The first two links are the desired outcome. However, on Safari, all the links appear as though they are using the example "border-radius2" class that I set up; It is as though there is no border-radius being applied
As you can see on the published site (still in development) (http://dessertbargilbert.com), it works perfectly fine on desktop in Chrome, but when testing on iPad, but buttons are squared off. Why would this be? The end goal is to get all class with "border-radius" to have the border applied correctly.
Any help is greatly appreciated.

Answer 1

I just played around with devtools in Safari (seems like it breaks on Safari desktop, not just iOS devices), and it seems like the outline property doesn't play nicely with border-radius.
It worked for me when I removed the outline and just kept the border and border-radius:
.btn-effect {
/* Changing `border` color to a non-zero opacity */
border: 1px rgba(255,255,255,0.5) solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
/* Removing outline styles */
/* outline: 1px solid; */
/* outline-color: rgba(255, 255, 255, .5); */
/* outline-offset: 0px; */
text-shadow: none;
transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
}