<div class="page">
      <h1>Styling disclosure widgets</h1>
          <h2>How can I add some (very) basic styles?</h2>
          <p>For starters, you might like to add a background color to your summary element, and then a border of the same color around the entirety of everything else. This ties the contents together, visually.</p>
          <p>In order to get a border around the entirety of your non-summary content, put it all in a div (or some other containing element you deem appropriate):</p>
    &lt;h3&gt;Here is your summary content&lt;/h3&gt;
    &lt;p&gt;We've put all our other content in a containing div.&lt;/p&gt;
    &lt;p&gt;This way, we can put a border around (or otherwise style) this container.&lt;/p&gt;
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;

body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 .5rem;

header, main {
  margin: 1rem 0;

main *+* {
  margin-top: 1rem;

/* Styling the Disclosure Widgets */

details > summary {
  background-color: #fdb;
  cursor: pointer;
  padding: .5rem 1rem;

details > summary > * {
  display: inline;

details > div {
  border: 2px solid #fdb;
  margin-top: 0;
  padding: 1rem;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.