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

Shapes are everywhere in web blueprint. 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). Merely if you want to brand your website stand out and catch the company's eye, you tin can attempt using circles. Here'due south a ridiculously cool instance of a circular blueprint:

Website design with video clips in circle to look like a record

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, round div container, and oval using CSS.

Download Now: Free Intro Guide to HTML & CSS

How to Brand a Perfect Circle With a Border Radius in CSS

  1. Add the HTML element.
  2. Assign it an equal width and height.
  3. Set the CSS edge-radius belongings to fifty%.

Step ane: Add the HTML chemical element.

Let'due south say y'all want to brand an paradigm into a perfect circle. In that case, you'd add an image element with an alt and source aspect in HTML.

Hither'due south an example:

                                          
<img src="https://images.unsplash.com/photograph-1622322062536-895d869b09ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=ingather&due west=1500&q=80" alt="distressed Italian wall in pink and grey hues">

Step 2: Assign it an equal width and height.

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

Step 3: Set the CSS border-radius holding 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 edge-radius belongings to 50%.

Here'south the CSS and consequence:

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

How to Create a Circumvolve Div Using Edge-Radius CSS

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

Here'south an example:

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

Notice that I made the div a flex container and then I could identify text inside the div and eye it using the align-items and justify-content backdrop.

To acquire more about this process, check out eleven Ways to Heart Div or Text in Div in CSS.

How to Brand an Oval With a Border Radius in CSS

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

Here's an example:

Come across 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 tin help take hold of your visitor's eye and elevate your pattern. The best part? It's piece of cake to create circles using the CSS border-radius property. Yous just need to know the basics of HTML and CSS to create this unique shape.

New Call-to-action

css introduction

Originally published Jun four, 2022 seven:00:00 AM, updated August 23 2022