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": "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--small: 4px;
--wp--preset--border-radius--medium: 8px;
--wp--preset--border-radius--large: 12px;
--wp--preset--border-radius--x-large: 20px;