Квадрат, который вы видите в своем образце, является границей iframe.Вы можете легко удалить это с помощью стилей:
iframe {
border: 0;
}
Содержимое iframe явно переполняет содержащий div, когда у div есть position: absolute (или relative, в этом отношении).Я не совсем уверен, почему это так, но вы всегда можете обойти это, поместив этот div в контейнер, который содержит только div и iframe, и переместите позиционирование в этот элемент:
<div id="outer">
<div>
<iframe></iframe>
</div>
</div>
#outer {
position: absolute;
width: 100px;
height: 100px;
}
#outer > div {
border-radius: 50px;
height: 100px;
width: 100px;
overflow: hidden;
border: 5px solid #D3D3D3;
}
iframe {
border: 0;
background-color: pink;
height: 100%;
overflow: hidden;
width: 100%;
}
Позаботившись об этом, вы заметите, что iframe перекрывает часть границы.Это то же самое поведение, которое вы видели бы в chrome, если бы вы просто удалили position: absolute.
Теперь, когда у вас есть обертка, это небольшое исправление, чтобы также переместить границу к этомуобертка, которая также позаботится об этой проблеме и даст вам красивую границу круга, которая будет выглядеть одинаково во всех современных браузерах.
Обратите внимание, что вы хотите оставить свойство border-radius включенным оба делятся, но переместите свойство border в #outer.Теперь, поскольку оболочка имеет границу, а ее дочерний элемент - нет, оболочка будет немного больше, поэтому для гладкого круга ей также потребуется немного больший радиус границы:
#outer {
position: absolute;
width: 100px;
height: 100px;
border: 5px solid #D3D3D3;
border-radius: 55px;
}
#outer > div {
border-radius: 50px;
height: 100px;
width: 100px;
overflow: hidden;
}
iframe {
border: 0;
background-color: pink;
height: 100%;
overflow: hidden;
width: 100%;
}
Рабочая демоверсия