Unlock Design Consistency: How to Use the New Border Radius Presets in WordPress 6.9

As a WordPress developer, I’ve seen the platform evolve in incredible ways. Each new release brings us closer to a more intuitive, powerful, and flexible content management system. WordPress 6.9 is no exception, and one of its most exciting, albeit subtle, new features is a game-changer for designers and theme developers: border radius size presets.

You might think, “Border radius? Is that really a big deal?” The answer is a resounding yes. It’s a small change that represents a massive leap forward in creating consistent, scalable, and beautifully designed websites directly within the block editor. In this article, we’ll dive deep into what these presets are, why they matter, and how you can leverage them to streamline your design workflow.

The Old Way: The Wild West of Border Radii

Let’s take a quick trip back to the pre-WordPress 6.9 era. You’re building a site and want all your buttons, featured images, and container blocks to have a subtle, 8px rounded corner. How did you achieve this? For each individual block, you’d navigate to the border controls, click the link icon to set a uniform radius, and manually type in “8px”.

This process had several glaring pain points. First, it was tedious and repetitive. Clicking and typing the same value over and over again is not an efficient use of time. Second, it was incredibly prone to human error. Did you type “8px” or “9px” on that last button? Was it pixels, ems, or rems? Without meticulous checking, inconsistencies would inevitably creep into your design, creating a less professional look.

For theme developers, the solution was often to write custom CSS to enforce these styles. While effective, this created a disconnect between the theme’s design system and the user’s experience in the editor. A user could still override these styles, leading to confusion and breaking the intended design. There was no native, user-friendly way to offer a curated set of design choices for something as fundamental as corner roundness.

Enter WordPress 6.9: A New Era of Consistency with Presets

WordPress 6.9 elegantly solves this problem with the introduction of border radius size presets. Instead of a simple input field, users are now presented with a set of predefined options, often labeled as “Small,” “Medium,” and “Large.” This simple UI change has profound implications for a more structured design process.

These presets are not just arbitrary labels; they are defined at the theme level. This means a theme developer can establish a design system where “Small” always corresponds to 4px, “Medium” to 8px, and “Large” to 16px, for example. Now, instead of remembering specific pixel values, a site builder or content creator can simply choose the conceptually appropriate size. This ensures that every single block using the “Medium” preset has the exact same border radius, guaranteeing visual harmony across the entire website.

How to Use Border Radius Presets in the Editor

For end-users, applying these new presets is incredibly intuitive. The beauty of this feature is its simplicity. If your theme supports it, you’ll see the new options automatically.

Here’s how it works:

1. Select a block that supports border controls, such as a Button, Image, Group, or Cover block.
2. In the block settings sidebar on the right, navigate to the “Styles” tab.
3. Find the “Border” panel and expand it.
4. In the “Radius” control, you will now see a segmented control or a similar UI element with your theme’s presets (e.g., S, M, L).
5. Simply click the preset you want to apply. That’s it!

This simple, one-click action replaces the old, error-prone manual input. It empowers users to make design choices that are always on-brand and consistent with the theme’s intended aesthetic.

For Developers: Defining Your Presets in theme.json

The true power of this feature is unlocked within your theme’s theme.json file. This is where you, as a developer, can define the exact presets available to your users, effectively building your design system’s rules directly into the WordPress interface.

To add your own custom border radius presets, you’ll add a radiusPresets array within the settings.border object in your theme.json. Each preset is an object with three key properties: name, slug, and radius.

Here’s a practical code example:

 { "version": 3, "settings": { "border": { "radiusPresets": [ { "name": "Small", "slug": "small", "radius": "0.25rem" }, { "name": "Medium", "slug": "medium", "radius": "0.5rem" }, { "name": "Large", "slug": "large", "radius": "1rem" } ] } } }

In this example, we’ve defined three clear options. The name is what the user sees in the editor, the slug is used by WordPress to generate the CSS class, and the radius is the actual CSS value. By using relative units like rem, you also ensure your design scales beautifully with user font-size preferences, a key aspect of modern, accessible web design.

The Big Picture: Why This Is More Than Just Rounded Corners

The introduction of border radius presets is a microcosm of the entire Full Site Editing philosophy: bringing powerful, system-level design controls into the native WordPress experience. This feature delivers several key benefits:

• Rock-Solid Design Consistency: This is the primary win. Presets eliminate guesswork and ensure brand guidelines are followed, leading to a more polished and professional website.
• Massive Workflow Efficiency: For both developers and site builders, presets are a huge time-saver. Design decisions are made once in theme.json and applied effortlessly across the site.
• Simplified Maintenance and Scalability: Need to update your site’s look and make the corners a bit rounder? Just change the value in theme.json once. Every block using that preset will update automatically. This is a maintenance dream come true.
• User Empowerment with Guardrails: It gives content creators and site managers creative freedom within a predefined, brand-safe framework. They can build and design without needing to know CSS or worry about going “off-brand.”

Conclusion: Embrace the Change

The new border radius presets in WordPress 6.9 are a perfect example of a thoughtful, targeted improvement that enhances the entire platform. It’s a feature that respects the needs of both the developer creating the theme and the user building the page. By promoting consistency, boosting efficiency, and simplifying maintenance, it marks another significant step in the maturation of the block editor as a world-class site-building tool.

Ready to build more consistent, professional, and maintainable websites? Update your sites to WordPress 6.9 and start exploring the power of design presets. And if you’re looking to implement a robust, scalable design system for your next WordPress project, our team of expert developers is here to help. Contact us today for a consultation and let’s build something amazing together!