Border Radius Presets

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

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

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

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

Border Radius Preset Examples

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

Buttons

Group