Grow your CSS skills. Land your dream job.

Round corners in Image.

  • # April 6, 2011 at 1:45 am

    Is it possible to give an Image Rounded Corners with css like this:

    roundedCornerImage{
    border: inside 30px solid #FFFFFF;
    border-radius:30px;
    -webkit-border-radius:30px;
    }

    something like that?

    # April 6, 2011 at 1:53 am

    border: inside 30px solid #FFFFFF; <– That ‘inside’ doesn’t exist as a value as far as I know. I don’t think it will ever either – It would mess up the box model.

    # April 6, 2011 at 1:57 am

    well i made that inside part up. (kinda)
    I thought of Photoshop just by the properties. but is it possible to give an image a rounded corner with css? im having a hard time even wrapping my head around that idea.

    # April 6, 2011 at 2:11 am

    Yes, it’s very possible! Check this out http://css-tricks.com/video-screencasts/57-using-css3/

    .round {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }

    That will round anything that has a class of “round”.

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

You must be logged in to reply to this topic.

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