circle()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The circle()
CSS function defines a circle using a radius and a position. It is one of the <basic-shape>
data types.
Try it
clip-path: circle(50px);
clip-path: circle(6rem at right center);
clip-path: circle(10% at 2rem 90%);
clip-path: circle(closest-side at 5rem 6rem);
clip-path: circle(farthest-side);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #ffee99;
}
#example-element {
background: linear-gradient(to bottom right, #ff5522, #0055ff);
width: 100%;
height: 100%;
}
Syntax
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
Values
<shape-radius>
-
This may be a
<length>
, or a<percentage>
or valuesclosest-side
andfarthest-side
.closest-side
-
Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.
farthest-side
-
Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension.
<position>
-
Moves the center of the circle. May be a
<length>
, or a<percentage>
, or a values such asleft
. The<position>
value defaults to center if omitted.
Formal syntax
<circle()> =
circle( <radial-size>? [ at <position> ]? )
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
<position-one> |
<position-two> |
<position-four>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
Examples
>Basic circle
In the example below, the shape-outside
property has a value of circle(50%)
, which defines a circle on a floated element for the text to flow round.
<div class="box">
<img
alt="A hot air balloon"
src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
img {
float: left;
shape-outside: circle(50%);
}
Specifications
Specification |
---|
CSS Shapes Module Level 1> # funcdef-basic-shape-circle> |
Browser compatibility
Loading…
See also
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes