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.
Curious, is this working for you at the moment? I have been using style-elements similar to this on iframes, but within the last week or so they have stopped working for me.
If I use “border” the best I get is top and left borders, with right and bottom chopped off.
I love the idea of using this box shadow, but currently sharepoint online will show me the shadow in edit mode, but once I save a draft or publish I no longer see the box shadow.