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

Shapes are everywhere in spider web design. Squares and rectangles are the nigh common because they maximize space on the rectangular devices they're displayed on (desktops, tablets, mobile devices, fifty-fifty smart swatches). But if y'all want to brand your website stand out and catch the visitor's eye, you tin attempt using circles. Here's a ridiculously cool example of a circular design:

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

Image Source

At present that nosotros understand some of the benefits of incorporating circles into your website's design, permit's walk through how to create a circle, circular div container, and oval using CSS.

Download Now: Free Intro Guide to HTML & CSS

How to Make a Perfect Circumvolve With a Edge Radius in CSS

  1. Add the HTML element.
  2. Assign it an equal width and peak.
  3. Set the CSS border-radius property to 50%.

Step 1: Add the HTML element.

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

Here'south an example:

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

Stride 2: Assign information technology an equal width and summit.

To make an element into a perfect circumvolve, it must have a stock-still and equal width and height. Then gear up the width and elevation to the same value in CSS.

Footstep 3: Set the CSS border-radius belongings 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 fifty%.

Here'south the CSS and result:

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

How to Create a Circle Div Using Edge-Radius CSS

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

Here'southward 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 and so I could place text within the div and center information technology using the marshal-items and justify-content backdrop.

To learn more than about this procedure, 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 most identical process to making a perfect circumvolve. You lot add the HTML chemical element. Simply instead of assigning it an equal width and summit, gear up them to be unlike. Then, set the CSS edge-radius property to 50%. The issue is an oval.

Here's an example:

See the Pen How to Brand 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 aid grab your company'southward eye and elevate your design. The best part? It's easy to create circles using the CSS border-radius holding. You only need to know the basics of HTML and CSS to create this unique shape.

New Call-to-action

css introduction

Originally published Jun 4, 2021 7:00:00 AM, updated August 23 2021