I have a JSFiddle showing my issue: https://jsfiddle.net/nu2dhpmy/
The relevant CSS:
.background {
position: absolute;
display: block;
width: 50%;
height: 50%;
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(to bottom, #becaff 0%, #4514b7 98%);
border-image-slice: 1;
background-image: linear-gradient(to bottom, #edf4ff 70%, #c2d2f0), linear-gradient(to bottom, #becaff 0%, #4514b7 98%);
background-origin: border-box;
background-clip: content-box, border-box;
}
The .background div should show a border with curved corners, as it does on most devices/browsers. But on my iOS device and in Safari on my Mac, it shows both the curved border as well as one with square corners, so we end up with a strange double border effect.
Does anyone know how to fix this (and end up with the same appearance we see on Windows/Android)? Thanks!
