# Softer Card Style for Dashboard Widgets

> Gives dashboard widgets rounded corners, more breathing room and a colored top border, set with SCSS variables.

- Type: SCSS
- Runs: Admin head
- Category: [Dashboard](https://wpide.com/library/category/dashboard/)
- Tags: dashboard, design, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/dashboard-card-style/

## Code

```scss
// Style settings.
$accent: #2271b1;
$radius: 10px;

#dashboard-widgets {
    .postbox {
        border-radius: $radius;
        border-top: 3px solid $accent;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
        overflow: hidden;
    }

    .postbox-header {
        border-bottom-color: rgba($accent, .15);

        .hndle {
            font-size: 15px;
        }
    }

    .inside {
        padding: 4px 16px 16px;
    }
}
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Softer Card Style for Dashboard Widgets" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/