CODEWITHSUNDEEP
csssafarirounded-corners
user1013693
user1013693

Reputation: 41

CSS rounded corners in iframe in Safari

I'm trying include iframe with rounded edges - my solution works fine in IE9, FF, Chrome, but not in Safari. Is any way (JS, CSS, etc) to have iframe with rounded edges? Currently I have following code:

.somediv iframe{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}

Thanks in advance

Upvotes: 3

Views: 4934

Answers (4)

Vincent Orback
Vincent Orback

Reputation: 2397

I guess you could just do this to work around the problem. Put the same class on both.

<html>
<head>
  <style>
    .somediv {
      border-radius: 50%;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="somediv" width="400" height="400" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

Upvotes: 1

Lea Verou
Lea Verou

Reputation: 23887

Try putting border-radius on a wrapper div and set overflow:hidden on it as well. Haven’t tried it, but it could work.

Upvotes: 2

user1013693
user1013693

Reputation: 41

Rounded corners definitely work on div in Safari... but not if you add an iframe. Please check out the code, which is below - it doesn't work in any browser... but if you change:

<div class="somediv" >
    <iframe class="" ...>

to

<div class="" >
    <iframe class="somediv" ...>

then will works in chrome, ff and ie9, but still not in safari...

The code:

<html>
<head>
  <style>
    .somediv {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      -khtml-border-radius: 20px;
      border-radius: 20px;
      border: 2px solid red;
      height: 225px;
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="" width="400" height="225" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25455

you're better off giving .somediv if its the immediate parent the rounded corners. Rounded corners definitely work on div's in safari.

Upvotes: 2

Related Questions