Hand drawn borders using CSS

The border-radius property allows setting two different radii for each corner so we can have elliptical corners.

1.button {
2    border-radius: 10px / 50px;
3}

By combining large and small values for every corner, a hand drawn border effect can be achieved.

1.button {  
2	border-top-left-radius: 175px 25px;
3	border-top-right-radius: 15px 125px;
4	border-bottom-right-radius: 150px 20px;
5	border-bottom-left-radius: 15px 175px;
6}

Using a shorthand:

1.button {  
2    border-radius: 175px 15px 150px 15px / 25px 125px 20px 175px;
3}

Find a extended example as A hand drawn button on Codepen.

I learnt this from PaperCSS.