css_outlines/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>CSS multiple borders</title>
  <link href="base.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>

<body>

  <header>
    <h1 class="primary-heading">CSS multiple borders</h1>
  </header>

  <main>

    <div class="outline-and-border">
      <p>This example uses oultines. outlines work like borders but they fall outside of borders and will overlap the margin and other neighbouring elements. Unlike borders, outlines also have an <code>outline-offset</code> property.</p>
    </div>

    <div class="border-and-pseudo">
      <p>This example uses a pseudo element to create a second border. Since it's an element, it can also have a background color; silulating a third border.</p>
    </div>

    <div class="border-and-box-shadow">
      <p>This example uses multiple box shadows to create unlimited borders.</p>
    </div>

  </main>

  <footer>
  </footer>

</body>
</html>