CSS adding border radius to an IFrame

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;
         


        

Answer 1

The box-shadow will round corners. Just have a spread-distance of the thickness of your border and a blur value of 0. This is a hack, but what isn't in HTML?

box-shadow: 0 0 0 1px #000;

Will add a 1 pixel border. The first two zeros are the offset. The third zero is how much blur you want to give to the shadow (none). The 1px is how far "out" you want the shadow to go. The last parameter is the color of the border. Most people omit the spread because they want their shadows to be the same size as the element.

Here is an example where I did this, which works in at least IE9 and Chrome 17: http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/