{"id":6683,"date":"2026-07-12T08:25:45","date_gmt":"2026-07-12T15:25:45","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6683"},"modified":"2026-08-01T15:00:40","modified_gmt":"2026-08-01T22:00:40","slug":"border-radius-presets","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/border-radius-presets\/","title":{"rendered":"Border Radius Presets"},"content":{"rendered":"\n

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).<\/p>\n\n\n\n

Border radius preset values are defined in theme.json<\/strong>, making it easy to apply consistent corner treatments throughout your website.<\/p>\n\n\n\n

{\n\t\"settings\": {\n\t\t\"border\": {\n\t\t\t\"radiusSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"4px\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"8px\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"xLarge\",\n\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\"slug\": \"x-large\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n
This code yields a set of preset variables for border radius:<\/p>\n\n\n\n
--wp--preset--border-radius--small: 4px;\n--wp--preset--border-radius--medium: 8px;\n--wp--preset--border-radius--large: 12px;\n--wp--preset--border-radius--x-large: 20px;\n<\/code><\/pre>\n\n\n\n
Border Radius Preset Examples<\/h2>\n\n\n\n
Here are a few examples of blocks with border radius presets:<\/p>\n\n\n\n
Buttons<\/h3>\n\n\n\n
\n
Small (4px)<\/a><\/div>\n\n\n\n
Medium (8px)<\/a><\/div>\n\n\n\n
Large (12px)<\/a><\/div>\n\n\n\n
xLarge (20px)<\/a><\/div>\n<\/div>\n\n\n\n
\n
Small (4px)<\/a><\/div>\n\n\n\n
Medium (8px)<\/a><\/div>\n\n\n\n
Large (12px)<\/a><\/div>\n\n\n\n
xLarge (20px)<\/a><\/div>\n<\/div>\n\n\n\n
Group<\/h3>\n\n\n\n
\n
This is a sample group with Small (4px) border radius preset.<\/p>\n<\/div>\n\n\n\n
\n
This is a sample group with Medium (8px) border radius preset.<\/p>\n<\/div>\n\n\n\n
\n
This is a sample group with Large (12px) border radius preset.<\/p>\n<\/div>\n\n\n\n
\n
This is a sample group with xLarge (20px) border radius preset.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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. This code yields a set […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Border Radius Presets \u2013 Brian Gardner","simple_seo_seo_description":"Explore the border radius presets in Suede and learn how consistent corner styles are defined in theme.json.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6683","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6683"}],"version-history":[{"count":3,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6683\/revisions"}],"predecessor-version":[{"id":6688,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6683\/revisions\/6688"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}