Comicbook Inspired Hand Drawn Borders – ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

Here are some pure CSS borders that looks like it was pulled from a comic book, it has got that distinct hand-drawn look and feel to it. If you are going for a comic book inspired layout for your page you will love this.

If you are having trouble with the pen, try the archived copy on GitHub

<div class="box box1">
<div class="oddboxinner"> bangers?</div>
</div>
<div class="box box2">
<div class="evenboxinner"> bangers!</div>
</div>
<div class="box box3">
<div class="oddboxinner"></div>
</div>

@import url(https://fonts.googleapis.com/css?family=Bangers);

body{
background:#fff;
font-family: ‘Bangers’, cursive;
font-size: 25px;
}
.box{
margin:25px;
width:250px;
height:250px;
background:#fff;
border: solid black;
border-color: black;
float:left;
}

.box1{
border-width: 3px 4px 3px 5px;
border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
transform: rotate(2deg);
}
.box2{
width:350px;
border-width: 3px 3px 5px 5px;
border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
transform: rotate(-2deg);
}

.box3{
border-width: 5px 3px 3px 5px;
border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
transform: rotate(2deg);
}

.oddboxinner{
margin:15px;
transform: rotate(-2deg);
}
.evenboxinner{
transform: rotate(2deg);
margin:15px;
padding:0 5px;
float:right;
background:#ddd;
border:1px solid #222;
box-shadow:3px 3px 0 #222;
}