Quick Tip: Using Border-Radius to Create Round Elements

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).


Join us in our newest publication:

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.

  1. img{
  2. border-radius: 100%;
  3. }

Screen Shot 2016-06-02 at 8.31.40 AM

Share and Enjoy !

0 0