Style embedded html iframe and border so it doesn’t look sunk on the page

If left unstyled, your embedded iframe content when working with html pages appears inside “sunken” boxes/frames (browser and context-dependent, of course). I don’t find this look to be very appealing, so I typically adjust the iframe’s properties a bit in the html to give it a little less sink and a little more pop. I add specific width and height values to be exact about where I’m placing it and what it contains, and I use box-shadow instead of border which gives it that “lift” off the page.

Consider the following script just a starting place, then get creative with your own content and design. You’ll want your embedded content to “fit in” with the rest of its page’s contents so try to be consistent if you have other boxed elements/containers on the page (Tip: Use F12 and element selection to see the style properties of other parts of your page).

<iframe src="https://sharepoint.contoso.com/SitePages/MyLinks.aspx" border="0" frameborder="0" style="border-style:none;box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);width:262.5px;height:250px;" cellspacing="0"></iframe>

P.S. I’m sure I could write this prettier, but it works. For instance, you could reference the iframe in your CSS rather than hard-coding it in the html body.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.