Get a free trial // Grow your CSS skills // Land your dream job

creating rounded corners with CSS in iframe

  • # January 31, 2013 at 11:41 pm

    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 . If anyone has a solution that might work would be appreciated. Thank Steve

    # January 31, 2013 at 11:59 pm

    If you apply it directly to the iframe it works. Like this:

    .panelContent iframe {
    border-radius: 10px;

    **Edit:** That appears to work in Firefox, but not Chrome. Looking into it.

    # February 1, 2013 at 12:41 am

    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.

    # February 1, 2013 at 12:41 am

    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.

    # February 1, 2013 at 12:43 am

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed