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.