Радиус-радиус iFrame отображает визуальные зазоры

Question

При добавлении граничного радиуса в родительский div iFrame граница не идеально подходит для iFrame, даже если им назначены одинаковые значения ширины и высоты.

Я добавил стрелки, указывающие на визуальные промежутки в результирующем изображении ниже. Скриншот из последней версии Chrome (март 2016 года).

---

HTML код:

<div class="mapFrame"> 
    <iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&amp;output=embed" width="500" height="400"></iFrame> 
</div> 

CSS код:

.mapFrame 
{ 
    border-style: solid; 
    border-width: 6px; 
    border-color: #ffffff; 
    box-shadow: 0px 0px 20px #000000; 
    margin: auto; 
    border-radius: 80px; 
    overflow: hidden; 
    width: 500px; 
    height; 400px; 
    position: relative; 
} 

Результат:

Answer 1

Вы пробовали .mapFrame iframe {border: none}? С моего компьютера (также самый последний хром) он по умолчанию является рамкой iframe по умолчанию. Вы также можете подумать о том, чтобы сделать iframe display:block, поскольку встроенные элементы имеют тенденцию иметь высоту линии и расстояние между буквами, что отличает точный рендеринг пикселей.

Answer 2

Радиус границы не поддерживается и не поддерживается. Если вы хотите получить желаемый эффект, попробуйте использовать DIV вокруг элемента и вместо этого используйте графику с переполнением скрытого в вашем CSS. Возможно, вы захотите изучить технику раздвижных дверей, если вы меняете разницу по высоте.

http://www.alistapart.com/articles/slidingdoors/

Надеется, что это помогает.

Удачи вам!