HTML-CSS: Circle

Last update on June 16 2025 13:03:54 (UTC/GMT +8 hours)

HTML-CSS : Exercise-33 with Solution

Using HTML, CSS creates a circular shape with pure CSS.

Use border-radius: 50% to curve the borders of the element to create a circle.
Since a circle has the same radius at any given point, the width and height must be the same. Differing values will create an ellipse.

HTML Code:

<!-- This line declares the start of an HTML document. -->
<!DOCTYPE html>
<!-- This line indicates the start of the HTML document's root element. -->
<html>
<head>
<!-- This line specifies the character encoding for the document. -->
<meta charset="utf-8">
<!-- This line sets the viewport width to the width of the device. -->
<meta name="viewport" content="width=device-width">
<!-- This line sets the title of the HTML document. -->
<title>Using HTML, CSS creates a circular shape with pure CSS.</title>
</head>
<body>
<!-- This line creates a container div with the class "w3r-circle". -->
<div class="w3r-circle"></div>
</body>
</html>

Explanation:

The HTML document structure is defined with proper tags like <!DOCTYPE html>, <html>, <head>, and <body>.
Character encoding is set to UTF-8 to ensure proper rendering of characters.
The viewport meta tag is used to ensure proper scaling on various devices.
The title of the document is set.
A <div> element with the class "w3r-circle" is created, which will be styled to create a circular shape using CSS.

CSS Code:

/* This block of CSS rules targets elements with the class "w3r-circle". */
.w3r-circle {
  /* This line sets the border radius to 100%, making the element a circle. */
  border-radius: 100%;
  /* This line sets the width of the element to 50 pixels. */
  width: 50px;
  /* This line sets the height of the element to 50 pixels. */
  height: 50px;
  /* This line sets the background color of the element to a shade of purple. */
  background: #CC87DD;
}

Explanation:

The CSS .w3r-circle selector targets elements with the class "w3r-circle".
border-radius: 100%; creates a circular shape by setting the border radius to 100% of the element's width/height.
width: 50px; and height: 50px; set the dimensions of the circular element to 50 pixels by 50 pixels.
background: #CC87DD; sets the background color of the circular element to a shade of purple (#CC87DD).

Go to:

PREV : Triangle.
NEXT : Responsive image mosaic.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.