Creating Circles with CSS

Perfect circle shapes with nothing but pure CSS

If your page design requires one or more circle shapes, you don’t need to make or download (or steal or whatever) an image file to get the job done. You can turn to CSS and its border-radius property:

border-radius: length|percentage;
length
A value that uses any CSS length measurement, such as px, em, rem, vw, or vh.
percentage
A percentage value.

border-radius is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-right, and border-bottom-left-radius properties, each of which can take one or two length or percentage values. It can get complicated, but fortunately you can ignore all that complication if all you want is a circle shape, because that only requires two things:

  • Apply the rule border-radius: 50%; to a block-level element (such as a div).
  • Apply a height and width to that block-level element and give both properties the same value.
    • Here’s an example: