Has anyone tried to make rounded corners work in iframe. youtube video.. have tried several techniques that I have found in searches, but non have worked. Here is the site that we are working on http://50.116.93.4/~forced2/ . If anyone has a solution that might work would be appreciated. Thank Steve
So yeah, border radius works on Firefox. But not on Webkit. I've found a couple of bugs that look like they might be the problem.
I also found a work around though, if you're willing to go to a little extra trouble. This StackOverflow answer details it. It will add rounding to Webkit, but it's a little more difficult than just saying border-radius: 10px, unfortunately.
I don't think you'll be able to do it via CSS directly on the iframe or the div around it.
What you may be able to do is put in 4 images and absolutely position each one above the iframe.
.vidWrapper {
position: relative; /* positioning context for images /
width: 354px;
height: 231px;
}
img { position: absolute; }
.topBorder,
.leftBorder,
.bottomBorder { left: 0px; } / makes images left side align left /
.topBorder,
.leftBorder,
.rightBorder { top: 0px; } / makes images top side align top /
.rightBorder { right: 0px; } / align right side to right /
.bottomBorder { bottom: 0px; } / align the bottom side to the bottom */
<style type="text/css">
.vidWrapper {
position: relative; /* positioning context for images */
width: 354px;
height: 231px;
}
img { position: absolute; }
.topBorder,
.leftBorder,
.bottomBorder { left: 0px; } /* makes images left side align left */
.topBorder,
.leftBorder,
.rightBorder { top: 0px; } /* makes images top side align top */
.rightBorder { right: 0px; } /* align right side to right */
.bottomBorder { bottom: 0px; } /* align the bottom side to the bottom */
</style>
Has anyone tried to make rounded corners work in iframe. youtube video.. have tried several techniques that I have found in searches, but non have worked. Here is the site that we are working on http://50.116.93.4/~forced2/ . If anyone has a solution that might work would be appreciated. Thank Steve
If you apply it directly to the iframe it works. Like this:
Edit: That appears to work in Firefox, but not Chrome. Looking into it.
So yeah, border radius works on Firefox. But not on Webkit. I've found a couple of bugs that look like they might be the problem.
I also found a work around though, if you're willing to go to a little extra trouble. This StackOverflow answer details it. It will add rounding to Webkit, but it's a little more difficult than just saying
border-radius: 10px, unfortunately.I don't think you'll be able to do it via CSS directly on the iframe or the div around it.
What you may be able to do is put in 4 images and absolutely position each one above the iframe.
.vidWrapper { position: relative; /* positioning context for images / width: 354px; height: 231px; } img { position: absolute; } .topBorder, .leftBorder, .bottomBorder { left: 0px; } / makes images left side align left / .topBorder, .leftBorder, .rightBorder { top: 0px; } / makes images top side align top / .rightBorder { right: 0px; } / align right side to right / .bottomBorder { bottom: 0px; } / align the bottom side to the bottom */