How to Style IFrames With CSS

Understanding how IFrames work in website design

Two men coding on computers
vgajic / Getty Images

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

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

Using CSS to Style the IFRAME Element

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

IFRAME
  • 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 I always include on my iframes:
    margin: 0;
  • padding: 0;
  • border: none;
  • width: value;
  • height: value;

With the

width

and

height

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

overflow

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

scrolling

attribute on your iframe as well. To use the

scrolling

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

yes

,

no

, or

auto

.

yes

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

no

says to remove all scroll bars whether needed or not.

auto

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

scrolling
attribute:scrolling="no"</em>><br/>This is an iframe.<br/>

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

overflow

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

overflow
property:style="overflow: scroll;"</em>><br/>This is an iframe.<br/>

There is no way to turn off the scrolling completely with the

overflow

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

border

style property (or it's related

border-top

,

border-right

,

border-left

, and

border-bottom
properties) 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.