How to Create Circle with Text in Tailwind 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 Circle with Text in Tailwind 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 ContentCircle with te

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 HTML

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 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 CSS3 property for each corners ?

In this article, we will learn how to style a corner using the CSS3 property. You can achieve this task by using border-radius properties. The border-radius property in CSS is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values

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: HTML <!DOCTYPE html> <html> <head> <style> img {

How to create shape using CSS clipping ?

You can easily create shapes using the clip-path property in CSS. Actually clip-path property lets you clip an element to a basic shape. The basic shape like circle, ellipse, the polygon can be achieved using the <basic-shape> property value of clip-path which will be discussed further in this

How to create a canvas circle using Fabric.js ?

In this article, we are going to see how to create a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make

How to Create a Ribbon using CSS?

In this article, we will learn how to create a ribbon using CSS.PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "N

Create a transparent border with CSS

In CSS, we can create a transparent border by using the border property in a nested div tag. The steps to create this are: Step 1: Create a nested div tag. Step 2: Specify the outer div tag's border-style to be solid and the border-width property can be of any desired size. Step 3: The size of the i