Question

Adding a border to an IFrame is no biggie – you do it like this e.g.:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;

The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:

Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this…

Answer 1

Border radius isn’t well supported or consistent yet. If you want the desired affect, try using DIV’s around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.

http://www.alistapart.com/articles/slidingdoors/

Hope this helps.

Good luck!