I had a project last quarter: custom theme, a solid design system in Figma. Implementing consistent border radii in WordPress turned out to be the hard part for the client. Every time they spun up a new page or added a component, the edges came out just off. It frustrated them, and it frustrated me too, since I kept having to explain why some buttons were 4px and others 6px after a content editor touched them. Keeping the border radii consistent was a real problem.
Before WordPress 6.9, managing border-radius in the block editor was a pain. You either hard-coded values into your CSS, which left content editors no flexibility and meant constant requests for minor tweaks, or you let them type in whatever pixel value they wanted. You know where that goes: a design system that looks like it was built by committee, with every button and image on its own curve. The editor gave you no way to keep things visually consistent.
Why custom CSS for border radii was always a hack
My first thought, and I bet it was yours too, was to pile on more CSS overrides in bbioon-theme.css or inject inline styles through some custom block variations. That works on a technical level for a quick fix. But it fights the system, gives the user nothing in the block editor, and makes maintenance a headache. Every theme update, every new developer on the project, you’re explaining a custom hack instead of using what WordPress already does. It’s a band-aid, not a real fix.
The good news: WordPress 6.9 brought a proper solution with theme.json border.radiusSizes. It lets theme developers (that’s us) define a controlled set of border radius presets. Instead of free-form input, your users get visual options that stay consistent with the design language you’ve established. You get to hold the design together without fighting the platform.
Implementing border radius presets in theme.json
Here’s how you define these border radius presets in your theme.json file. It’s straightforward and follows the same pattern as spacing sizes. Prefix your slugs, like bbioon-small, to avoid conflicts with other plugins or block styles.
{
"version": 3,
"settings": {
"border": {
"radiusSizes": [
{
"name": "None",
"slug": "bbioon-none",
"size": "0"
},
{
"name": "Small",
"slug": "bbioon-small",
"size": "4px"
},
{
"name": "Medium",
"slug": "bbioon-medium",
"size": "8px"
},
{
"name": "Large",
"slug": "bbioon-large",
"size": "16px"
},
{
"name": "Full",
"slug": "bbioon-full",
"size": "9999px"
}
]
}
}
}The control adapts automatically to the number of presets you define. With 1 to 8 presets, users see a slider with a stop for each value. With 9 or more, it switches to a dropdown menu. Either way, users can still enter custom values through a dedicated button, so they keep flexibility without breaking the design system. You can read more in the official WordPress Core development notes on WordPress 6.9 Theme.json Border Radius Presets Support.
The feature is purely additive. Existing themes without border radius presets keep working as before and show only the custom input controls. Your themes opt in by adding the radiusSizes configuration to your theme.json file. No breaking changes.
Work with the editor instead of fighting it
The takeaway is simple: stop fighting the block editor with endless CSS overrides and use theme.json instead. It’s the right way to build WordPress themes that stay consistent and easy to maintain. Border radius presets save development time, prevent design drift, and make life easier for anyone managing content on the site.
This stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.
