Can I use CSS to distort borders so they look like sketched?

css, css-transforms

Solution

This article on hand-drawn borders gives a great example of achieving this effect on buttons using only CSS by using large elliptical rounded corners (through the CSS border-radius property). It probably won't work as well for large `div` elements.

Example adapted from the article:

button {
      background:transparent;
      padding:0.5rem 0.5rem;
      margin:0 0.5rem;
      font-size:1rem;

      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
}

button:hover{
   box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
button.lined.thick{
   border:solid 3px #41403E;
}
button.dotted.thick{
   border:dotted 3px #41403E;
}
button.dashed.thick{
  border:dashed 3px #41403E;
}
button.lined.thin{
   border:solid 2px #41403E;
}
button.dotted.thin{
   border:dotted 2px #41403E;
}
button.dashed.thin{
  border:dashed 2px #41403E;
}

<button class='lined thick'>Lined Thick</button>
<button class='dotted thick'>Dotted Thick</button>
<button class='dashed thick'>Dashed Thick</button>
<div>&nbsp;</div>
<button class='lined thin'>Lined Thin</button>
<button class='dotted thin'>Dotted Thin</button>
<button class='dashed thin'>Dashed Thin</button>

Problem

Original source