Grow your CSS skills. Land your dream job.

CSS corner radius

  • # June 6, 2012 at 11:53 pm

    all the the sudden the corner radii of the main content div have gone funny.

    The bottom right on all the is not taking, and in Firefox (which I just upgraded) none of the corner radii are working?

    http://www.mollymorkoski.com


    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom right-radius: 15px;

    # June 6, 2012 at 11:56 pm

    You seem to be missing the webkit declaration for the bottom right corner on the live site.

    By now you can safely drop the prefixes though. Also, it would be much more efficient to use the shorthand property.

    All of this:

    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom right-radius: 15px;

    Can simply be written as:

    border-radius: 15px;
    # June 7, 2012 at 3:08 pm

    Ok, thanks…that was a great help
    SOLVED

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".