Search code examples
wireframecss

Sketchy style borders with CSS border-image? Anyone identified this species yet?

Call me crazy, but wouldn't it be cool to apply a hand-written/sketchy style border to your HTML elements? Has anyone done this with any success yet? Please share!!!

Solution

  • I just gave it a try. I'm no artist, but the concept works. jsFiddle

    div {
  border: 15px solid transparent;
  width: 350px;
  padding: 10px 20px;
}

#round {
  border-image: url("http://s3.amazonaws.com/dfc_attachments/images/3247065/sketchy_web.png") 30 30 round;
}

#stretch {
  border-image: url("http://s3.amazonaws.com/dfc_attachments/images/3247065/sketchy_web.png") 30 30 stretch;
}