-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
58 lines (36 loc) · 1.7 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
---
title: circle()
slug: Web/CSS/basic-shape/circle
page-type: css-function
browser-compat: css.types.basic-shape.circle
---
{{CSSRef}}
The **`circle()`** CSS [function](/en-US/docs/Web/CSS/CSS_Functions) defines a circle using a radius and a position. It is one of the {{cssxref("<basic-shape>")}} data types.
{{EmbedInteractiveExample("pages/css/function-circle.html")}}
## Syntax
```css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
```
### Values
- `<shape-radius>`
- : This may be a {{cssxref("length")}}, or a {{cssxref("percentage")}} or values `closest-side` and `farthest-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 {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as `left`. The `<position>` value defaults to center if omitted.
## Formal syntax
{{csssyntax}}
## Examples
### Basic circle
In the example below, the {{cssxref("shape-outside")}} property has a value of `circle(50%)`, which defines a circle on a floated element for the text to flow round.
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
- [Guide to Basic Shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)