CSS Circle

We can create and design different shapes using css design. The web application required a circle shape for the functions. We can create a circle using the tag's simple and multiple CSS properties. We can set the HTML elements' height, width, and border-radius.

Basic CSS Filled Circle

The basic filled circle shows different colours. We can use the background property to fill the circle shape. The circle can be filled with colour, text, and any information.

Syntax

The following syntax shows the CSS circle design.

Parameter

The following parameters are required for the circle.

• Height: The vertical radius of the circle set using the height property.
• Width: The horizontal radius of the circle set using the height property. The height and width must be set on the exact measurement.
• Background colour: The background colour shows the circle area. It offers a filled circle of the tag.
• Border-radius: The radius helps curve the height and width's border. The border-radius can set the 50% value by default.

Examples

The example shows the basic CSS circle design for the web page. We can use multiple designs for the circle shapes.

Example 1:

The following example uses a simple circle without data.

Output

The output shows the basic circle of the tag.

Example 2:

The following example uses a simple circle with data and different background colours.

Output

The output shows the basic circle of the tag.

Basic CSS Empty Circle

The basic empty circle shows different border colours. We can use the border property to get the size of the circle. The circle can be set with color, text, and any information.

Syntax

The following syntax shows the CSS circle design.

Parameter

The following parameters are required for the circle.

• Height and width: the basic circle property required for all types of the circle. The height and width can be set to the same value.
• Border: the border colour shows the circle area. It can be any size and any colour.
• Border-radius: the radius creates the curve of the circle. The border-radius is set to 50% by default.

Examples

The example shows the basic CSS empty circle design for the web page. We can use multiple colours and sizes for the circle shapes.

Example 1:

The following example uses the simple bordered circle without data.

Output

The output shows the basic circle of the tag.

Example 2:

The following example uses the simple bordered circle with data.

Output

The output shows the basic circle of the tag.

CSS Circle Designs

The circle design shows size, border, background, and information with CSS properties.

Examples

The following examples show the different background and border colours. We can create a circle shape for all required tags.

Example 1:

The example creates multiple circles with different border colours and different background colours.

Output

The output shows the circle designs of the tag.

Example 2:

The example creates simple circles with background and border colours for the main div tag.

Output

The output shows the circle designs of the given tag.

Conclusion

The css properties create and describe circle shapes with the data and designs. We can insert data, information, and images in the circle.