How to create a bouncing bubble effect using CSS ?

How to create empty circle with CSS ?

Last Updated : 14 Oct, 2024

Creating an empty circle with CSS means styling an HTML element (like a div) to appear as a circular shape. This is done by setting equal width and height, adding a border, and applying border-radius: 50% to form the circle.

Creating an Empty Circle By Using border-radius Property

the border-radius property involves setting a div element’s width and height to equal values, applying a border for the outline, and using border-radius: 50% to transform the square into a circle.

Syntax

element {
    border: 1px solid color;
    border-radius: 50%;
}

Example 1: In this example, we create an empty circle using CSS. The .circle class styles a div with a specified width, height, border, and border-radius of 50% to form the circular shape.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        How to create empty circle with CSS?
    </title>

    <style>
        .circle {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 50%;

        }
    </style>
</head>

<body>
    <h3>
        Creating Empty Circle by Using CSS
    </h3>
    <div class="circle"></div>
</body>

</html>

Output:

createing empty circle with CSS

Example 2: In this example, we create a circle using CSS. The .circle class styles the div element with a width, height, and border-radius of 50% to form the circular shape.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        How to create empty circle with CSS?
    </title>

    <style>
        .circle {
            width: 200px;
            height: 200px;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <h3>
        Create Empty Circle By Using CSS
    </h3>
    <div class="circle"></div>
</body>

</html>

Output:

empty

Empty circle by Using Css Example Output

How to create a bouncing bubble effect using CSS ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Create Circle with Text in Tailwind CSS ?

To create a circle with text inside using Tailwind CSS, a utility-first framework that simplifies styling. Using Tailwind's predefined classes, you can quickly design circular elements, center the text inside, and customize the appearance all without writing custom CSS. Table of Content Circle with

How to Create Triangle with CSS?

Creating a triangle in CSS involves a clever use of borders to form various shapes without actual images. By setting the width and height of an HTML element to zero and applying specific borders, you can create directional triangles. To create a triangle: Add a single <div> element in your HTM

How to create a bouncing bubble effect using CSS ?

The bouncing bubble effect in CSS creates an animation where elements, typically circles or bubbles, move up and down, simulating a bouncing motion. Using properties like @keyframes, transform, and animation, this effect adds a playful, dynamic visual appeal to the webpage. ApproachContainer Setup:

How to Create Circle Loading Animation Effect using CSS ?

In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader,

How to Create a List Group with Badges using CSS ?

A List Group with Badges is a UI pattern that combines a list of items with additional visual indicators (badges) to convey extra information. Badges allow you to visually highlight or categorize items within a list. This is especially beneficial when you want to draw attention to specific elements

How to create a basic empty HTML canvas ?

HTML Canvas: The canvas is an element in HTML called <canvas> element, and it is used to draw graphics using JavaScript. It is only a container for graphics. You must use JavaScript to draw the graphics, and it has several methods for drawing paths, boxes, circles, text, and adding images. A c

How to create a Chevron Arrow using CSS ?

In the article, we will see how to make a Chevron Arrow using CSS. A Chevron Arrow is an arrow, often used to indicate direction or to represent navigation elements. Creating a chevron arrow using CSS involves using CSS properties like border and transform to generate the arrow shape. Syntaxtransfor

How to create a gradient shadow using CSS ?

A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e

How to create an Area Chart using CSS ?

In this article, we will see how to create Area charts using CSS. There are many Libraries available, which can help us to build area charts, although, here, we will be using pure HTML and CSS to create an Area Chart. An Area Chart is a graphical representation of quantitative data where multiple da

How to create a Circular/Rounded images using CSS ?

In this article, we will create a rounded image with CSS. It can be done by using the CSS border-radius property. This property is mainly used to make round shapes. It contains a numeric value in the form of pixels. Example 1: C/C++ Code <!DOCTYPE html> <html> <head> <style>