index.html
<!doctype html>
<html>
<head>
<title>Border-style</title>
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<p>none</p>
</section>
<section>
<p>hidden</p>
</section>
<section>
<p>dotted</p>
</section>
<section>
<p>dashed</p>
</section>
<section>
<p>solid</p>
</section>
<section>
<p>double</p>
</section>
<section>
<p>groove</p>
</section>
<section>
<p>ridge</p>
</section>
<section>
<p>inset</p>
</section>
<section>
<p>outset</p>
</section>
</body>
</html>
setup.css
/* Same as before. */
body {
font-family: sans-serif;
padding: 1rem;
}
section { padding: 1rem; }
style.css
section {
border-width: 0.5rem; /* All of them; easier to see! */
&:nth-child(1) { border-style: none; }
&:nth-child(2) { border-style: hidden; }
&:nth-child(3) { border-style: dotted; }
&:nth-child(4) { border-style: dashed; }
&:nth-child(5) { border-style: solid; }
&:nth-child(6) { border-style: double; }
&:nth-child(7) { border-style: groove; }
&:nth-child(8) { border-style: ridge; }
&:nth-child(9) { border-style: inset; }
&:nth-child(10) { border-style: outset; }
/* Every one but the first one. */
&:not(:first-child) { margin-block-start: 1rem; }
}