Il supporto per i vari browser è indicato nel sito del W3C in questa pagina: https://www.w3schools.com/css/css3_flexbox.asp
Nel caso specifico di Internet Explorer, il supporto è presente nella versione 11.

Su un monitor di grandi dimensioni, o meglio con un’alta risoluzione di punti come quello di un PC da tavolo o di un tablet di generazione recente, il layout stesso si mostrerà nella sua interezza con sfondi, animazioni full-screen ecc. ecc.

Su uno smartphone, invece, quello che conta veramente è permettere una lettura agevole dei contenuti e ciò andrà a scapito dell’impatto grafico complessivo, come dici tu.

Alcuni siti, anche importanti, lasciano la possibilità di scegliere tra la visualizzazione normale e quella per dispositivi mobili quando vengono visitati su questi ultimi. Ciò può costituire un’opzione ma non mi trova concorde.

Vedere un sito su uno smartphone è un’esperienza “limite”, per così dire, quindi la prevalenza va data sempre ai contenuti.

Sì, è possibile esprimere due raggi differenti in orizzontale ed in verticale, sempre in px, separati da uno slash vale a dire:

border-radius: 30px / 10px;

dove 30px è il raggio orizzontale e 10px è il raggio verticale.

Nel caso in cui gli angoli abbiano raggi diversi tra loro, le relative dichiarazioni saranno le seguenti:

border-top-left-radius: 30px 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px 5px;
border-bottom-left-radius: 40px 10px;

Ho pubblicato i relativi esempi in questa pagina.