Quick Tip: Using Border-Radius to Create Round Elements

Published June 2, 2016 by CSS Newbies.

CSS3’s border-radius property is most commonly used to add rounded corners to elements that are otherwise square. It’s a great tool for adding some softness to your designs. Less commonly, the property is also used to turn square images into perfect circles (if you’re looking for a circle, your image has to be square, otherwise you’ll end up with some variation of an oval).

borderradius

If you start with the square image above and apply the following CSS to it, it becomes a perfect circle, as seen in the image below.

img{
border-radius: 100%;
}

Screen Shot 2016-06-02 at 8.31.40 AM

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>