feat(css): Update syntax for circle() and ellipse() functions

mdn · Feb 21, 2025 · ee7c2ec · ee7c2ec
1 parent b172f0a
commit ee7c2ec
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/css/functions.json b/css/functions.json
@@ -103,7 +103,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/calc-size"
   },
   "circle()": {
-    "syntax": "circle( [ <shape-radius> ]? [ at <position> ]? )",
+    "syntax": "circle( <radial-size>? [ at <position> ]? )",
     "groups": [
       "CSS Shapes"
     ],
@@ -203,7 +203,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/element"
   },
   "ellipse()": {
-    "syntax": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )",
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )",
     "groups": [
       "CSS Shapes"
     ],

diff --git a/css/syntaxes.json b/css/syntaxes.json
@@ -132,7 +132,7 @@
     "syntax": "<percentage>? && <image>"
   },
   "circle()": {
-    "syntax": "circle( [ <shape-radius> ]? [ at <position> ]? )"
+    "syntax": "circle( <radial-size>? [ at <position> ]? )"
   },
   "clamp()": {
     "syntax": "clamp( <calc-sum>#{3} )"
@@ -303,7 +303,7 @@
     "syntax": "element( <id-selector> )"
   },
   "ellipse()": {
-    "syntax": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )"
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )"
   },
   "ending-shape": {
     "syntax": "circle | ellipse"
@@ -710,9 +710,15 @@
   "quote": {
     "syntax": "open-quote | close-quote | no-open-quote | no-close-quote"
   },
+  "radial-extent": {
+    "syntax": "closest-corner | closest-side | farthest-corner | farthest-side"
+  },
   "radial-gradient()": {
     "syntax": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )"
   },
+  "radial-size": {
+    "syntax": "<radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
+  },
   "ratio": {
     "syntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
   },
@@ -830,9 +836,6 @@
   "shape-box": {
     "syntax": "<visual-box> | margin-box"
   },
-  "shape-radius": {
-    "syntax": "<length-percentage> | closest-side | farthest-side"
-  },
   "side-or-corner": {
     "syntax": "[ left | right ] || [ top | bottom ]"
   },

diff --git a/css/syntaxes.md b/css/syntaxes.md
@@ -39,9 +39,6 @@ Or, syntaxes might reference other syntaxes that are also defined in syntaxes.js
 "length-percentage": {
   "syntax": "<length> | <percentage>"
 },
-"shape-radius": {
-  "syntax": "<length-percentage> | closest-side | farthest-side"
-},
 ```
 
 For more information about the formal grammar of CSS syntaxes, see [CSS value definition syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax).