# Nicer Styling for Details (Accordion) Blocks

> Gives the Details block and other summary/details elements a clean accordion look with a border, padding and a rotating arrow.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: accordion, details, blocks, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-details-accordion-style/

## Code

```css
details {
    margin: 0 0 12px;
    border: 1px solid rgba(127, 127, 127, .3);
    border-radius: 6px;
    padding: 0 16px;
}

details > summary {
    position: relative;
    padding: 14px 28px 14px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}

details[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

details[open] {
    padding-bottom: 14px;
}
```

## Notes

Applies to every details element on the front end.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Nicer Styling for Details (Accordion) Blocks" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/