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. 

Show more...

Here are the details.

Remove the border

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

details > summary {
     outline: none;
}

Show more...

Here are the details.

Add a cursor pointer

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;
}

Show more...

Here are the details.