Round editor `.postbox` containers to match WP 7.0 dashboard widgets

[jillq]

Background

WordPress 7.0's admin visual reskin (#64308) introduced an 8px border-radius ($radius-l) on dashboard widgets via #dashboard-widgets .postbox (see #64549). This modernized the dashboard's appearance alongside the rest of the 7.0 reskin — the new Modern color scheme as default, taller form elements, 2px radii on buttons and inputs, and so on.

However, the same .postbox class is used extensively outside the dashboard: editor screens for Posts, Pages, Media, Users, custom post types, plus every plugin that adds meta boxes (WooCommerce, Yoast, Jetpack, ACF, etc.). These retained their square corners.

The result is a split-personality admin:

• Dashboard: rounded, modern-feeling
• Every editor screen, including Edit Media: square, dated-feeling

This is especially visible for plugin authors: a plugin-added meta box on an edit screen looks markedly different from a core dashboard widget, even though both use .postbox.

Problem

Plugins and themes that want to align with WP 7.0's modernized visual language currently have three suboptimal choices when it comes to meta boxes:

1. Hardcode the values in plugin CSS — brittle, silently drifts when Core updates the token values, and creates visible inconsistency with neighbouring Core screens.
2. Scope the override to plugin-owned screens only — fixes the plugin's screens but widens the inconsistency (plugin-screen meta boxes look different from core-screen meta boxes using the same class).
3. Don't align — fragments the admin visual experience.

Proposal

Round editor .postbox containers to 8px, matching the dashboard widget pattern already shipped in 7.0. In src/wp-admin/css/common.css:

.postbox {
    border-radius: $radius-l; /* 8px — matches #dashboard-widgets .postbox */
    overflow: hidden; /* clip internal full-width elements (tab sidebars, action bars) */
}

Sites that already rely on the token system introduced in _tokens.scss can reference $radius-l directly. Plugins like WooCommerce can then remove their scoped bridge styles.

Scope considerations

• Some .postbox instances contain full-width children (tab sidebars in WP-admin like the product data panel, the #major-publishing-actions action bar at the bottom of the publish meta box) that extend to the container edge. Adding overflow: hidden to .postbox clips these cleanly to the rounded corners. This pattern was verified in production via ​woocommerce/woocommerce#64191 (merged commit ​19868f1).
• Inner collapsible panels (e.g. WooCommerce's attributes/variations panels using .wc-metabox.postbox) should remain square. Plugins handle this on their side since it's plugin-specific markup.
• The historical #17284 (#major-publishing-actions missing border-radius, from 2011) and #18657 (.postbox .hndle in backend needs border-radius, also from 2011) flagged related clipping issues back when admin postboxes had a 3px radius. The overflow: hidden approach proposed here resolves that whole class of problem in one place.

Benefits

• Consistency — one visual language across dashboard and editor screens.
• Plugins align for free — no scoped overrides, no drift when Core updates the token.
• Low risk — CSS-only, additive, extends a pattern already shipped in 7.0.
• Reduces plugin-side maintenance — WooCommerce, Yoast, and any other plugin shipping scoped fixes can remove them.

Prior art

• #64308 — WP 7.0 admin reskin (introduced the radius on dashboard widgets).
• #64549 — Card and container styles, which added the 8px radius to dashboard widgets specifically.
• #65085 — proposal to expose admin design tokens as CSS custom properties. If both land, the bridge-style CSS in plugin codebases becomes unnecessary.
• #17284, #18657 — older tickets that surfaced clipping behaviour at the postbox edge.

Related

WooCommerce shipped ​woocommerce/woocommerce#64191 (merged April 27, 2026 — commit ​19868f1) as a scoped bridge — it rounds meta boxes on WooCommerce-owned editor screens only (post-type-product, post-type-shop_order, post-type-shop_coupon, woocommerce_page_wc-orders), with a TODO comment tying back to this ticket. If this lands, that bridge CSS can be removed in its entirety, and editor meta boxes will be visually consistent across core and every plugin.

Trac ticket: https://core.trac.wordpress.org/ticket/65142
---

### Edit Media Screen (Save metabox)

Before	After

| | |

### Edit Post Screen

Before

After

[audrasjb]

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

[desrosj]

While this is a continuation of the admin reskin, it's not something introduced in 7.0 (enhancements typically do not have a "first version the issue is reproducible in). Removing trunk. @sabernhardt feel free to re-add if you disagree.