Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have bordered boxes (div) which I want to make look like a sketch, i.e. with the borders not drawn as straight lines, but slightly distorted, as if drawn by hand.

Illustration:

"Sketched" boxes

Can this be done using CSS transformation or similar?

like image 498
not2savvy Avatar asked Apr 29 '17 10:04

not2savvy


People also ask

How do you change the border style?

Click the Table Design tab.) Click Border Styles and choose a border style. Click Borders and choose where you want to add the borders. Tip: To change or add borders for part of your table, check that Border Painter is selected and then, in the table, click each border that you want to change or add.

What is difference between outline and border?

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.


1 Answers

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>
like image 111
Silveri Avatar answered Sep 30 '22 23:09

Silveri