Home > Web Front-end > CSS Tutorial > How Can I Create a Circle Using HTML and CSS?

How Can I Create a Circle Using HTML and CSS?

Barbara Streisand
Release: 2024-11-27 08:25:13
Original
958 people have browsed it

How Can I Create a Circle Using HTML and CSS?

Drawing Circles on an HTML Page

Creating a circular element using HTML5 and CSS3 is not directly possible. However, a technique can be employed to create an element that visually resembles a circle.

Creating a Rounded Rectangle

The key to simulating a circle is to create a rectangle with rounded corners. The border-radius property in CSS allows us to define the curvature of the corners.

Determining the Radius

To achieve a perfect circle, the border-radius value should be equal to half the width or height of the rectangle. This ensures that the corners are curved inward sufficiently to create the impression of a circle.

Example Code

Consider the following code snippet that creates a circular element:

<div>
Copy after login
#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}
Copy after login

In this example, we create a rectangle with a width and height of 50 pixels. The border-radius value is set to 25 pixels, which is half the width/height of the rectangle. This produces a circle-like shape with red fill.

The above is the detailed content of How Can I Create a Circle Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template