circle() CSS Function

Description

The CSS circle() function is a basic shape value that can be used to create circular shapes on web pages. It can be used with the shape-outside and clip-path properties to control how content flows around and inside of the shape.

The circle() function takes a single parameter, which is the radius of the circle. The radius can be specified in pixels, percentages, or other units of measurement.

Here is an example of how to use the circle() function to create a circular image:

.circular-image {
  width: 100px;
  height: 100px;
  shape-outside: circle(50%);
}

In this example, the image will be clipped to the shape of a circle with a radius of 50% of its width and height.

The circle() function can also be used to create more complex shapes, such as this heart shape:

.heart-shape {
  width: 100px;
  height: 100px;
  shape-outside: circle(50% at 50% 50%) circle(50% at 50% 0);
}

This example creates two overlapping circles, one at the top of the heart and one at the bottom. The radius of each circle is 50% of the heart's width and height. The first circle is positioned at the center of the heart, while the second circle is positioned at the top of the heart.

The circle() function is a powerful tool for creating custom shapes on web pages. It can be used to create simple shapes, such as circles and squares, as well as more complex shapes, such as the heart shape above.

Here are some of the things you can do with the circle() function:

• Create circular images and other elements
• Clip elements to the shape of a circle
• Create rounded corners
• Create complex shapes, such as hearts, stars, and other symbols
• Use the circle() function with the shape-outside property to control how content flows around elements

The circle() function is supported by all major browsers.

Syntax

circle() = circle( <shape-radius>? [ at <position> ]? ) 

Values

• shape-radiusspecifies the radius of the circle. It can be set in absolute lengths or percentages. A percentage value here is resolved from the used width and height of the reference box. Negative values are not allowed.
• positionThe position argument defines the center of the circle. This defaults to center if omitted.

Example

<div class='circle'></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

.circle { 

  float: left;

  width: 150px;

  height: 125px;

  shape-outside: circle();

}

Browser Support

The following table will show you the current browser support for the CSS circle() function.

Desktop
79	37	54	24	10.1

Tablets / Mobile
37	54	24	10.3	3	37

Last updated by CSSPortal on: 7th October 2023