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?
![Download Now: How to Land a Developer Role in the World of AI [Free Checklist]](https://no-cache.hubspot.com/cta/default/53/8d6a0803-23b3-44d8-a193-5da3a6e366a7.png)
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:
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.
How to Make a Perfect Circle With a Border Radius in CSS
- Add the HTML element.
- Assign it an equal width and height.
- Set the CSS border-radius property to 50%.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
![How to Create Scrolling Text With CSS [+ Code Examples]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
![How to Center an Image with HTML and CSS [+ Code Modules]](https://www.hubspot.com/hubfs/center-an-image-in-html.jpg)
