Creating Google+ Style Jagged Borders with Pure CSS

Preview:

Description:

Pure CSS/CSS3 based jagged borders for your containers as you seen at Google plus website.

How to use it:

Create an element for the jagged border.

<div class="demo jagged-border"></div>

The required CSS to apply the jagged border to the element you just created.

.jagged-border {
  position: relative;
  width: 100%;
  height: 50px;
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
}
.jagged-border:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}

Optionally, you can add own styles to the Jagged Border.

.demo { background: #ECF0F1; }
.demo {
  background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
  background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
  -webkit-background-size: 20px 40px;
  background-size: 20px 40px;
}