TryIt Editor v2.0 - How to Limit Border Length with CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        margin: 50px;
        color: #000;
      }
      div {
        width: 150px;
        height: 60px;
        position: relative;
        z-index: 1;
        background-color: #ffff3b;
        margin: 20px auto;
        padding: 20px;
        color: #726E97;
      }
      div.top:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 5px;
        width: 50%;
        border-top: 3px solid #000;
      }
      div.bottom:before {
        content: "";
        position: absolute;
        left: 25px;
        bottom: 0;
        height: 15px;
        width: 70%;
        border-bottom: 3px solid #000;
      }
      div.left:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-left: 3px solid #000;
      }
      div.right:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-right: 3px solid #000;
      }
    </style>
  </head>
  <body>
    <h1>Example of limiting border length</h1>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>