Table of contents

Introduction

Prerequisites for Creating a Circle in CSS

Creating an Empty Circle by Using the border-radius Property

3.1.

Syntax

Example 1: Basic Circle

4.1.

HTML

4.2.

Output

Example 2: Colored Circle

5.1.

HTML and CSS

5.2.

Output

Example 3: Circle with Shadow

6.1.

HTML and CSS

6.2.

Output

Example 4: Circle with Image Background

Browser compatibility

Frequently Asked Questions

9.1.

How do I create a circle in CSS?

9.2.

What happens if the width and height are not equal?

9.3.

Can I add text or images inside a circle?

10.

Conclusion

Last Updated: Dec 28, 2024

Easy

How To Create Circle with CSS?

Author Rahul Singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Creating circles in CSS is simple and enhances web design. Use the border-radius property set to 50% on a square container to form a perfect circle. Adjust the size with the container's dimensions or use pseudo-elements like ::before and ::after for decorative circles. Circles are ideal for buttons, and accents, adding style and engagement to your designs.

This article will guide you through the process of creating a circle in CSS, its syntax, and examples to help you understand it better. By the end of this article, you’ll be equipped to use circles effectively in your projects.

Prerequisites for Creating a Circle in CSS

Before you start creating a circle in CSS, make sure you have a basic understanding of the following:

HTML Basics:
You need to know how to write simple HTML code to create elements like <div> or <span> that will be styled into circles.

CSS Fundamentals:
Understand basic CSS properties like width, height, and border-radius. These are essential for shaping elements.

A Text Editor:
Use any code editor like Visual Studio Code, Sublime Text, or even Notepad to write your HTML and CSS code.

A Browser:
Have a web browser like Chrome, Firefox, or Edge to test and see how your circle looks.

Once you have these basics covered, you can begin creating circles with CSS.

Creating an Empty Circle by Using the border-radius Property

The border-radius property in CSS is a powerful tool for styling elements by making their corners rounded. By setting the border-radius to 50% and ensuring the element's width and height are equal, you can create a perfect circle. This technique is frequently used in profile pictures, buttons, and other design elements.

Syntax

The basic syntax for creating a circle using CSS is as follows:

selector {
    width: value;
    height: value;
    border-radius: 50%;
    border: border-width border-style border-color;
}

selector: The HTML element you want to style (e.g., div, img).
width and height: The dimensions of the circle (must be equal).
border-radius: The key property to make the element circular; it is set to 50%.
border: Optional; specifies the style, width, and color of the border.

Example 1: Basic Circle

Here’s an example of creating a simple, empty circle:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Example</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid black;
            margin: 50px auto; /* Center the circle horizontally */
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Output

A black-bordered circle with a diameter of 100px will appear on your webpage.

Example 2: Colored Circle

You can also fill the circle with a background color:

HTML and CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Circle</title>
    <style>
        .colored-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #4CAF50; /* Green color */
            margin: 50px auto; /* Center the circle horizontally */
        }
    </style>
</head>
<body>
    <div class="colored-circle"></div>
</body>
</html>

Output

A green circle with a diameter of 120px will appear.

Example 3: Circle with Shadow

Adding a shadow to your circle can enhance its appearance:

HTML and CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow Circle</title>
    <style>
        .shadow-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #FF5722; /* Orange color */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Adds a shadow */
            margin: 50px auto; /* Center the circle horizontally */
        }
    </style>
</head>
<body>
    <div class="shadow-circle"></div>
</body>
</html>

Output

A circular shape with an orange fill and a subtle shadow effect.

Example 4: Circle with Image Background

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Circle Image Example</title>
 <style>
   .circle-image {
     width: 250px;
     height: 250px;
     border-radius: 50%;
     background-image: url('https://via.placeholder.com/250/09f/fff.png'); /* Placeholder image */
     background-size: cover;
     background-position: center;
   }
 </style>
</head>
<body>
 <div class="circle-image"></div>
</body>
</html>

Output

These examples show different variations of creating circles using CSS. You can experiment with sizes, colors, borders & background properties to achieve the desired visual effect.

Browser compatibility

The border-radius property is widely supported across modern browsers, like:

Chrome: Version 4.0 and above
Firefox: Version 3.0 and above
Internet Explorer: Version 9.0 and above
Safari: Version 3.1 and above
Opera: Version 10.5 and above

As you can see, the border-radius property has excellent browser compatibility, and you can confidently use it to create circles in your CSS designs without worrying about major browser inconsistencies.

However, it's important to note that older versions of Internet Explorer (IE8 and below) do not support the border-radius property. If you need to support these older browsers, you may need to use alternative techniques or provide fallback styles.

Frequently Asked Questions

How do I create a circle in CSS?

To create a circle in CSS, set the border-radius property to 50% and ensure the element's width and height are equal.

What happens if the width and height are not equal?

If the width and height are not equal, the shape will become an ellipse instead of a circle.

Can I add text or images inside a circle?

Yes, you can add text or images inside a circle by using appropriate alignment properties like text-align or flexbox for centering.

Conclusion

In this article, you learned how to create circular shapes using the border-radius property in CSS. From basic empty circles to advanced examples like colored circles with shadows, we covered a range of techniques to enhance your web designs. Circles are simple to create and can significantly improve the aesthetic appeal of your projects.

You can also check out our other blogs on Code360.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

314+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

View more events