IT PRESENT
CSS Iframes Style Examples
Using the CSS language only the position and exterior of the Iframe element can be stylized.
The internal content of the Iframe element can not be styled with CSS, this is possible using the JAVASCRIPT language.
Example external CSS style of the Iframe element
<iframe class="frame" src="https://itpresent.com" scrolling="no"></iframe>
<style >
.frame {
width:560px;
height:410px;
border:5px groove red;
border-radius:25px;
}
</style>
result:.frame {
width:560px;
height:410px;
border:5px groove red;
border-radius:25px;
}
</style>
JSFiddle
Example CSS position of the Iframe element
In the CSS language, it is possible to specify the position of the Iframe element itself. It is also possible to set the position of the specific HTML content of the document being displayed
<div id="outerdiv">
<iframe id="frame" src="https://itpresent.com" scrolling="no"></iframe>
</div>
<style >
#outerdiv {
width:580px;
height:130px;
overflow:hidden;
position:relative;
border:5px solid red;
}
#frame {
position:absolute;
top:-280px;
left:-2px;
width:580px;
height:750px;
}
</style>
result:#outerdiv {
width:580px;
height:130px;
overflow:hidden;
position:relative;
border:5px solid red;
}
#frame {
position:absolute;
top:-280px;
left:-2px;
width:580px;
height:750px;
}
</style>
