OSX Terminal borders

<!DOCTYPE html>
<html ng-app="">

  <head>
    
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="page-container" class="container">
      <h1>OSX Terminal borders</h1>
      <div id="border-editor" ng-controller="BorderEditorCtrl">
        <span ng-repeat="item in todos">{{item.text}}</span>
      
        <div id="background-box" class="background-box theme-{{boxTheme.current}}">
          <div  id="border-box" 
                class="border-box theme-{{boxTheme.current}}"
                style="border-width:{{border.width}}px"></div>
        </div>
        
        <div style="clear:both;"></div>  
        
        <p>
          <label>
            Theme:
            <select ng-model="boxTheme.current">
              <option value="dark">Dark</option>
              <option value="light">Light</option>
              <option value="solarized-dark">Solarized (Dark)</option>
              <option value="solarized-light">Solarized (Light)</option>
            </select>
          </label>
          <label>
            Border width:
            <input type="number" ng-model="border.width"/>
          </label>
        </p>
      </div>
      
      
      <h2>Usage</h2>
      <p>
        Take screenshot of the box and set it as Terminal background.
        Dumb, but works ;)        <br />
        <img src="https://files.app.net/qb5nIwe8" />
      </p>
    </div>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.3" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  </body>

</html>

function BorderEditorCtrl($scope) {
  $scope.boxTheme = {current: 'dark'};
  $scope.border = {width: 1};
}

/* Styles go here */

#page-container {
  height: 1000px;
}

#background-box {
  float: left;
}

.background-box.theme-dark {
  background-color: black;
}

.background-box.theme-light {
  background-color: white;
}

.background-box.theme-solarized-dark {
  background-color: #003945;
}

.background-box.theme-solarized-light {
  background-color: #FDF6E3;
}


#border-box {
  margin: 10px;
  
  width: 500px;
  height: 200px;
}

.border-box.theme-dark {
  border:   1px solid gray;
}

.border-box.theme-light {
  border:   1px solid #b9b9b9;
}

.border-box.theme-solarized-dark {
  border:   1px solid #465b62;
}

.border-box.theme-solarized-light {
  border:   1px solid #819090;
}

Generator of backgrounds for OSX Terminal.app to create borders of all 
Terminal windows