Same CSS code renders differently as viewport is increased/decreased.
Screencast below shows what happens in MS Edge and Mozilla Firefox.
Google Chrome does not display the same behavior.
border-radius: 200px 0px;
border:113px double rgba(255,255,155,0.7);
Firefox on Mac works ok.
I would'nt use it as its fairly unstabe at ceratin sizes but I see nothing like what is happening in your screencast in either Mac Firefox, Chrome or Safari. They all render the css fairly the same - In Safari the shape starts to breaks below 500px wide.