Border Radius Presets

Border radius presets are available in five steps: xSmall (4px), Small (8px), Medium (12px), Large (20px), and xLarge (40px). Below is the code used to define border radius presets in theme.json:

{
	"settings": {
		"border": {
			"radiusSizes": [
				{
					"name": "xSmall",
					"size": "4px",
					"slug": "x-small"
				},
				{
					"name": "Small",
					"size": "8px",
					"slug": "small"
				},
				{
					"name": "Medium",
					"size": "12px",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "20px",
					"slug": "large"
				},
				{
					"name": "xLarge",
					"size": "40px",
					"slug": "x-large"
				}
			]
		}
	}
}

This code yields a set of preset variables for border radius:

--wp--preset--border-radius--x-small: 4px;
--wp--preset--border-radius--small: 8px;
--wp--preset--border-radius--medium: 12px;
--wp--preset--border-radius--large: 20px;
--wp--preset--border-radius--x-large: 40px;

Border Radius Preset Examples

Here are a few examples of blocks with border radius presets:

Buttons

Group