Taming Border Radii with Theme.json Presets

Had a project last quarter, custom theme, solid design system in Figma. But man, implementing those consistent border radii in WordPress? Total nightmare for the client. Every time they spun up a new page or added a component, the edges were just off. Drove them nuts, and honestly, it drove me nuts having to explain why some buttons were 4px radius and others were 6px after a content editor touched them. This whole inconsistent border radius presets dance was a mess.

Before WordPress 6.9, managing border-radius in the block editor was a pain. You either hard-coded values into your CSS, which meant zero flexibility for content editors and constant nagging for minor tweaks, or you just let them type in whatever pixel value they wanted. You know where that leads: a design system that looks like it was built by committee, with every button and image having its own unique curve. There was no real guidance baked into the editor to maintain visual consistency.

Why Custom CSS for Border Radii Was Always a Hack

My first thought, and I bet it was yours too, was to just pile on more CSS overrides in bbioon-theme.css or even inject inline styles with some custom block variations. And yeah, that works on a technical level for a quick fix. But it fights the system, doesn’t empower the user in the block editor, and makes maintenance a real headache. Every theme update, every new developer on the project, you’re explaining a custom hack instead of leveraging WordPress’s evolving capabilities. It’s a band-aid, not a proper solution for a clean, scalable site.

Good news, though. WordPress 6.9 brought a proper solution: theme.json border.radiusSizes. This lets theme developers — that’s us — define a controlled set of border radius presets. So, instead of free-form input, your users get visual options, keeping things consistent with the design language you’ve established. It’s a game-changer for maintaining visual integrity 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, following the same pattern as spacing sizes. Remember to prefix your slugs, like bbioon-small, to avoid conflicts if you’re working 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 user experience is pretty slick too, adapting automatically based on the number of presets you define. With 1-8 presets, users see a handy slider with stops for each value. If you have 9 or more, the control smartly switches to a dropdown select menu. The kicker? Users always retain the ability to input custom values through a dedicated button, giving them flexibility without undermining the core design system. This feature builds on a great concept, which you can read more about on the official WordPress Core development notes for WordPress 6.9 Theme.json Border Radius Presets Support.

This is a purely additive feature, so existing themes without border radius presets will continue to work as before, showing only the custom input controls. Your themes can opt into this powerful feature simply by adding the radiusSizes configuration to your theme.json file. No breaking changes, just better tools at your disposal.

Stop Fighting the Editor, Start Empowering Your Users

Look, the takeaway here is simple: stop fighting the block editor with endless CSS overrides. Embrace theme.json. It’s the right way to build flexible, maintainable, and visually consistent WordPress themes in the modern era. Leveraging these border radius presets saves dev time, prevents design drift, and makes life significantly easier for everyone managing content on the site. This is how you build a robust foundation that scales.

Look, 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.