How to Draw a Circle Using the CSS Border Radius Property

When looking through a few of your favorite websites, what do you notice first? Maybe the images first, then the colors and typography. What about shapes?

Shapes are everywhere in web design. Squares and rectangles are the most common because they maximize space on the rectangular devices they’re displayed on (desktops, tablets, mobile devices, even smart swatches). But if you want to make your website stand out and catch the visitor’s eye, you can try using circles. Here’s a ridiculously cool example of a circular design:

Image Source

Now that we understand some of the benefits of incorporating circles into your website’s design, let’s walk through how to create a circle, circular div container, and oval using CSS.

Step 1: Add the HTML element.

Let’s say you want to make an image into a perfect circle. In that case, you’d add an image element with an alt and source attribute in HTML.

Here’s an example:

Step 2: Assign it an equal width and height.

To make an element into a perfect circle, it must have a fixed and equal width and height. So set the width and height to the same value in CSS.

Step 3: Set the CSS border-radius property to 50%.

The border-radius property can be used to create rectangles with rounded edges, ellipses, and other shapes — including a perfect circle. To create a perfect circle, specify the value of the border-radius property to 50%.

Here’s the CSS and result:

See the Pen Ellipsis by Christina Perricone (@hubspot) on CodePen.

How to Create a Circle Div Using Border-Radius CSS

To create a circular div in CSS, follow the same steps as above. Add a div in HTML. Then, set the width and height of the element to the same value. Finally, specify the value of the border-radius property to 50%.

Here’s an example:

See the Pen How to Create a Circle Div Using Border-Radius CSS by Christina Perricone (@hubspot) on CodePen.

Notice that I made the div a flex container so I could place text within the div and center it using the align-items and justify-content properties.

To learn more about this process, check out 11 Ways to Center Div or Text in Div in CSS.

How to Make an Oval With a Border Radius in CSS

Making an oval is a nearly identical process to making a perfect circle. You add the HTML element. But instead of assigning it an equal width and height, set them to be different. Then, set the CSS border-radius property to 50%. The result is an oval.

Here’s an example:

See the Pen How to Make an Oval With a Border Radius in CSS by Christina Perricone (@hubspot) on CodePen.

Drawing Circles in CSS

Creating and adding circles to your website or app can help catch your visitor’s eye and elevate your design. The best part? It’s easy to create circles using the CSS border-radius property. You just need to know the basics of HTML and CSS to create this unique shape.