<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Writing progress</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        font-family: sans-serif;
      }

      div {
        width: 220px;
        padding: 20px;
        margin: 10px;
        line-height: 2;
        background-color: yellow;
        text-align: center;
        display: inline-block;
      }

      .complete {
        border-style: solid;
      }

      .written {
        border-style: dashed;
      }

      .incomplete {
        border-style: dotted;
      }

      .writing, .review {
        border-bottom: 6px solid red;
      }

    </style>
  </head>
  <body>
    <h1>Writing progress</h1>

    <div class="complete">
      <p>Chapter 1: I was born</p>
    </div>

    <div class="complete">
      <p>Chapter 2: School</p>
    </div>

    <div class="written review">
      <p>Chapter 3: University</p>
    </div>

    <div class="written">
      <p>Chapter 4: Rock and roll</p>
    </div>

    <div class="incomplete writing">
      <p>Chapter 5: Fell in love</p>
    </div>

    <div class="incomplete">
      <p>Chapter 6: Children</p>
    </div>

    <div class="incomplete">
      <p>Chapter 7: Tired!</p>
    </div>
  </body>
</html>