How to Style IFrames With CSS

Understanding how IFrames work in website design

When you embed an element in your HTML, you have two opportunities to add CSS styles to it:

  • You can style the
  • You can style the page inside the
    (under certain conditions).

Using CSS to Style the IFRAME Element

Two men coding on computers
vgajic / Getty Images

The first thing you should consider when styling your iframes is the


  • itself. While most browsers include iframes without a lot of extra styles, it's still a good idea to add some styles to keep them consistent. Here are some CSS styles we always include on iframes:
    margin: 0;
  • padding: 0;
  • border: none;
  • width: value;
  • height: value;

With the




set to the size that fits in my document. Here are examples of a frame with no styles and one with just the basics styled. As you can see, these styles mostly just remove the border around the iframe, but they also ensure that all browsers display that iframe with the same margins, padding, and dimensions. HTML5 recommends that you use the


property to remove the scroll bars within a scroll box, but that isn't reliable. So if you want to remove or change the scroll bars, you should use the


attribute on your iframe as well. To use the


attribute, add it like any other attribute and then choose one of three values:




, or




tells the browser to always include scroll bars even if they aren't needed.


says to remove all scroll bars whether needed or not.


is the default and includes the scroll bars when they are needed and removes them when they are not. Here is how to turn off scrolling with the

scrollingattribute:scrolling="no">This is an iframe. 

To turn off scrolling in HTML5 you are supposed to use the


property. But as you can see in these examples it doesn't work reliably in all browsers yet. Here's how you would turn on scrolling all the time with the

property:style="overflow: scroll;">This is an iframe.

There is

no way

to turn off the scrolling completely with the


property. Many designers want their iframes to blend in with the background of the page they are on so that readers don't know that the iframes are even there. But you can also add styles to make them stand out. Adjusting the borders so that the iframe shows up more readily is easy. Just use the


style property (or it's related






, and

border-bottomproperties) to style the borders:iframe {border-top: #c00 1px dotted;border-right: #c00 2px dotted;border-left: #c00 2px dotted;border-bottom: #c00 4px dotted;}

But you shouldn't stop with scrolling and borders for your styles. You can apply a lot of other CSS styles to your iframe. This example uses CSS3 styles to give the iframe a shadow, rounded corners, and rotated it 20 degrees.

iframe {

margin-top: 20px;

margin-bottom: 30px;

-moz-border-radius: 12px;
-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);}

Styling the Iframe Contents

Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can't edit the page (for example, it's on another site).

If you can edit the page, then you can add an external style sheet or styles right in the document just like you would style any other web page on your site.

mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Style IFrames With CSS." ThoughtCo, Sep. 30, 2021, Kyrnin, Jennifer. (2021, September 30). How to Style IFrames With CSS. Retrieved from Kyrnin, Jennifer. "How to Style IFrames With CSS." ThoughtCo. (accessed May 29, 2023).