Border Radius Presets

Suede includes a refined border radius scale that introduces subtle softness while maintaining a clean, refined appearance. The following presets are available: Small (4px), Medium (8px), Large (12px), and xLarge (20px).

Border radius preset values are defined in theme.json, making it easy to apply consistent corner treatments throughout your website.

{
	"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;