Radius

0:00
WordPress has supported border-radius in the design system since version 6.9, and we naturally use it in our Design System. I want to briefly show you where you can adjust it, because at this point WordPress does not yet support configuring border-radius through the Site Editor — only in code. I have a small example page here with various boxes that already have a prepared border-radius. If I want to change it,

0:28
I first need to know where the system comes from. It comes from theme.json. I open the Theme File Editor, switch to the parent theme, open theme.json, and search for “radius” to jump to the place where we have

0:50
The various border-radius values configured. There are 2px, 4px, 8px border-radius values. In code these are always in rem, and each has a slug (the CSS variable) — simply radius-1, radius-2, and so on for easy adjustment. We also have an infinite radius for 100% rounded buttons and similar elements.

1:18
This is where I can adjust it for now. When I look at the Site Editor and go into Styles, there is no option to reconfigure border-radius globally. What I can do is go and globally adjust all boxes, for example.

1:40
If I want all my boxes — which have a border-radius by default — to have none, I would not go to each box individually and manually make the corners square. Instead I would find the Section Style used for these boxes. All boxes are centrally styled via the Section Style for Box.

2:06
I need to know where this Section Style is globally defined. It is also a JSON file. I go back to Tools → Theme File Editor → Parent Theme (it is also in the child theme for easier overriding). Under Styles I find Box 1, Box 2, and other Section Styles. If I look at Box 2 — the grey box —

2:36
Each box light grey — I can also adjust the label there. I can see the border-radius is preconfigured. I could now adjust it globally: this Section Style applies to groups, columns (the container), and individual columns. So I can configure it centrally for all these elements here — which currently requires going into code.

3:03
If I don’t want to do it in code, I can go into the Editor → Styles → Blocks. I need to know that this Section Style applies to Groups, Columns, and Column. So I search for “Group”, find it, and see the style variants (Section Styles). I select Box Light Grey and

3:32
Can reconfigure it — for example changing the radius from 16 to 0. This now applies to all boxes that are applied to Groups, but not to Columns and the Columns container.

3:50
I would also need to apply it there. If I really want it to take effect everywhere, the best place is in code. Without code, I have to find all the locations one by one — for example, also the Column block. I go there, find Box Light Grey, and adjust the border-radius there too so nothing slips through. It is a bit more tedious with a no-code approach.