<!DOCTYPE html>
<html ng-app="">
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<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}}"
<div style="clear:both;"></div>
<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>
Border width:
<input type="number" ng-model="border.width"/>
Take screenshot of the box and set it as Terminal background.
Dumb, but works ;) <br />
<img src="" />
<script data-require="jquery@*" data-semver="2.0.3" src=""></script>
<script data-require="bootstrap@*" data-semver="3.0.3" src="//"></script>
<script data-require="angular.js@*" data-semver="1.2.9" src=""></script>
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 to create borders of all
Terminal windows