Trusted answers to developer questions

How to create a circle in CSS

Free System Design Interview Course

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2024 with this popular free course.

CSS is a web programming language that is capable of creating a lot of shapes. Circles in CSS are created by declaring a few parameters.

svg viewer

Parameters

There are 4 parameters of a circle in CSS:

  • width: This defines the horizontal stretch of the circle.
  • height: This defines the vertical stretch of the circle.
  • background: This defines the color of the circle.
  • border-radius: This defines the radius of the circle’s border and must remain 50%. (You must keep width and height equal so that it remains a circle. The border-radius must remain 50%, however, try changing it to check the effect)

Example

This code creates a circle in CSS. According to your preferences, you may change the color, width, or height. However, you must keep width and height equal so that it remains a circle.

Note: The border-radius must remain 50%.

RELATED TAGS

circle
css
create
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?