Google-карты границы-радиуса не соблюдаются на мобильных устройствах

Question

У меня есть прямой элемент Google Maps с границей радиуса.На рабочем столе выглядит хорошо, но на мобильных устройствах углы карты не округлены, но за картой есть округленная граница.

Я искал везде в Интернете и не могу найти решение, которое работает -это ограничение карт Google, или я что-то упускаю из CSS?

<div id="search_params">
     <h3 id="search_by_address_text">search by address</h3>
     <input id="pac-input" class="controls" type="text" placeholder="">
     <div id="map"></div> 
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=places&callback=initMap"
async defer></script>

  #map {
    height: 400px;
    width: 600px;
    border: #798589 4px solid;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    max-width: 99%;
    max-height: 100%;
    margin: auto;
    overflow: hidden;
  }

Вид рабочего стола:

Просмотр с мобильного:

Answer 1

Любые стили к iframe также не соблюдались, поэтому я решил это, стилизовав дочерний div карты следующим образом:

  #map > div {
      border-radius: 20px;
      -webkit-mask-image: -webkit-radial-gradient(#798589, #798589);
      -webkit-transform: translate3d(0px, 0px, 0px);
  }

Answer 2

Вы добавляете границу к контейнеру, а не к самой карте, следовательно, почему она пересекает границу на мобильном телефоне (высота карты увеличивается)

Попробуйте вместо этого добавить границу в iframe.