Remove border from details summary element in CSS

This post describes how to remove the border from the summary element inside a details element in CSS.

Create the control

Create this control using the following HTML:

<details>
    <summary>Show more...</summary>
    <p>Here are the details.</p>
</details>

You can use this HTML to create interactive expand-and-collapse controls without any JavaScript.

Here are the details.

To remove the border, use the following CSS on the summary element

details > summary {
     outline: none;
}

Here are the details.

You can also change the cursor to a pointer to indicate to the user that they can interact with the control.

details > summary {
    outline: none;
    cursor: pointer;
}

Here are the details.