Add Border Radius to WP Dashboard Post Boxes

[generosus]

Good Day!

WordPress' dashboard always looks nice and tidy. How about adding another enhancement to it?

Here goes: Add a border radius to the dashboard's post boxes with the following CSS Rule (or equivalent):

.postbox {
    border-radius: 8px!important;
}

Result: ​https://prnt.sc/Nm40unbF7R-c

Special Note: If approved, the change will have to address the small line extension that appears when the post boxes are collapsed. Should be easy to fix.

Details: ​https://prnt.sc/DJegHoxdPold

The above will not only add a "cool factor" to the WordPress' dashboard, but also bring it in line with current website design trends.

Looking forward to your approval and integration.

Cheerio!

[sabernhardt]

I do not object to rounding the corners, but we would need to do that without !important (#26350).

[generosus]

Hey @sabernhardt,

I'll buy that :)

Thank you!

[generosus]

Hey @sabernhardt,

I would also like to recommend adding a border radius to the screen-meta (dropdown) element as follows:

#screen-meta {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#screen-meta-links .show-settings {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

Result (Collapsed): ​https://prnt.sc/yFcepHpB6iaD

Result (Expanded): ​https://prnt.sc/zWC243JTdhMO

Special Note: In the expanded mode, the "Help" tab will require a minor CSS clean-up.

Details: ​https://prnt.sc/t5jbYepOOYab

Thank you!

Added border radius to WP dashboard post boxes and screen-meta (dropdown)

Trac ticket: https://core.trac.wordpress.org/ticket/57931

Changes :

• ​1-Image
• ​2-Image
• ​3-Image
• ​4-Image

[generosus]

Update:

The CSS Rules provided below fix the small line extension that appears when the post boxes are collapsed. They should also be added to the affected patch(es) (with or without !important-- whatever works).

.postbox.closed {
    border: 1px solid #c3c4c7!important;
    box-shadow: 0 1px 1px rgba(0,0,0,.04)!important; 
}

.postbox.closed .postbox-header {
    border-bottom: 0px!important;
}

Before Above CSS Rules Applied: ​https://prnt.sc/WwmNVWGOnSAV
After Above CSS Rules Applied: ​https://prnt.sc/c8vYltqi1o8A

Special Notes:

1. It would be nice to come up with a CSS Rule that will add a border radius to the bottom-right corner of the Screen Options screen-meta box as noted here: ​https://prnt.sc/f_mF8BegYd5Q

2. It would be nice to check all others WordPress admin sections (e.g., plugins) to see if any boxes would look better with a border radius.

[karmatosed]

Thank you for this suggestion @generosus. Unfortunately I don't think it's going to be ideal as right now I would suggest less not more borders. It also at 8px is very strong compared to even the input values of 4px. As we have work to lighten the background and other elements this would make the boxes look quite unexpected. For now, I wouldn't recommend we bring this in.

As far as the shadow goes, that is an elevation doesn't exist anywhere else within the system so I again wouldn't really suggest we bring it in as one goal today is to unify what we have. I am all for you looking at that is in Storybook or the site editor work and suggesting based on anything there though if you want to review and consider what else could be done to have the impact you desire.

​https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page