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:
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%.
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:
<img src="https://images.unsplash.com/photo-1622322062536-895d869b09ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="distressed Italian wall in pink and grey hues">
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%.
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%.
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.
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.
Originally published Jun 4, 2021 7:00:00 AM, updated June 04 2021