How to make rounded images with CSS?



How to make rounded images with CSS?


Home Forums Design and Development How to make rounded images with CSS?

This topic contains 1 reply, has 2 voices, and was last updated by  Daniel 3 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #3198

    webangel

    Participant
    • Total posts: 4

    Is it still a good practice to create rounded photos manually in photoshop?

    #3202

    admin

    Keymaster
    • Total posts: 8

    CSS3 introduced border-radius property which is leting you to convert square images into rounded ones on the fly. It works pretty much with every modern browser. In this case there is no reason to pre-process images if CSS 3 can help. Especially if we are dealing with images that are uploaded by regular users who may not be familiar with a software like photoshop.

    Working example:

    CSS:

    .circle {
        border-radius: 50%;
    }
    

    HTML:
    <img class="circle" src="myfile.jpg">

    Keep in mind that in order to have photos perfectly round, you need to use images with the same width and height. Otherwise they will turn into ellipses.

    More info: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

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

You must be logged in to reply to this topic.


Want to contribute to the discussion or ask a question?  Login  or  register  for free... and there are more benefits from the membership than access to the forum!