CodePen

HTML

            
              <div class="border-modal">
  <div class="inner">
    <img src="http://d35nyfeeu8zws1.cloudfront.net/assets/border-header-3ed16cc10a03ba439a2f1939156f9ffc.png" /> .border-modal
  </div>
</div>

<div class="border-pipe">
  <div class="inner">
    <img src="http://d35nyfeeu8zws1.cloudfront.net/assets/border-pipe-c446287191740eb6248cd61d9787a625.png" /> .border-pipe
  </div>
</div>

<div class="border-blocks">
  <div class="inner">
    <img src="http://d35nyfeeu8zws1.cloudfront.net/assets/border-blocks-6e9b32576c7f4d24946fb2356861959a.png" /> .border-blocks
  </div>
</div>

<div class="border-sidebar">
  <div class="inner">
    <img src="http://d35nyfeeu8zws1.cloudfront.net/assets/border-sidebar-0f3a6f120f110237ed82ddf17f15d029.png" /> .border-sidebar
  </div>
</div>

<div class="border-header">
  <div class="inner">
    <img src="http://d35nyfeeu8zws1.cloudfront.net/assets/border-header-3ed16cc10a03ba439a2f1939156f9ffc.png" /> .border-header
  </div>
</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .border-modal,
.border-pipe,
.border-blocks,
.border-sidebar,
.border-header {
  margin: 20px;
}

/* ----- Border Modal ----- */

.border-modal {
  -moz-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-modal-379f146691e718e5de7084a90c85d93e.png') 48 22 46 31 repeat;
  -webkit-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-modal-379f146691e718e5de7084a90c85d93e.png') 48 22 46 31 repeat;
  border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-modal-379f146691e718e5de7084a90c85d93e.png') 48 22 46 31 repeat;
  border-style: solid;
  border-width: 48px 22px 46px 31px;
  color: #fff;
  padding: 10px;
  position: relative;
}
.border-modal:after {
  background: #000;
  content: "";
  bottom: -28px;
  left: -14px;
  position: absolute;
  right: -4px;
  top: -31px;
  z-index: -1;
}

.border-modal .inner {
  margin: -36px -10px -34px -19px;
}

/* ----- Border Pipe ----- */

.border-pipe {
  -moz-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-pipe-c446287191740eb6248cd61d9787a625.png') 12 repeat;
  -webkit-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-pipe-c446287191740eb6248cd61d9787a625.png') 12 repeat;
  border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-pipe-c446287191740eb6248cd61d9787a625.png') 12 repeat;
  border-style: solid;
  border-width: 12px;
  color: #fff;
  padding: 0;
  position: relative;
}

.border-pipe:after {
  background: #000;
  content: "";
  bottom: -4px;
  left: -4px;
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: -1;
}

/* ----- Border Blocks ----- */

.border-blocks {
  -moz-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-blocks-6e9b32576c7f4d24946fb2356861959a.png') 20 repeat;
  -webkit-border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-blocks-6e9b32576c7f4d24946fb2356861959a.png') 20 repeat;
  border-image: url('http://d35nyfeeu8zws1.cloudfront.net/assets/border-blocks-6e9b32576c7f4d24946fb2356861959a.png') 20 repeat;
  border-style: solid;
  border-width: 20px;
  color: #fff;
  padding: 5px;
  position: relative;
}
.border-blocks:after {
  background: #000;
  content: "";
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

/* ----- Border Sidebar ----- */

.border-sidebar {
  -moz-border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-sidebar-0f3a6f120f110237ed82ddf17f15d029.png") 34 20 20 0 repeat;
  -webkit-border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-sidebar-0f3a6f120f110237ed82ddf17f15d029.png") 34 20 20 0 repeat;
  border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-sidebar-0f3a6f120f110237ed82ddf17f15d029.png") 34 20 20 0 repeat;
  border-style: solid;
  border-width: 34px 20px 20px 0px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.border-sidebar:after {
  background: #000;
  content: "";
  bottom: -3px;
  left: 0;
  position: absolute;
  right: -3px;
  top: -20px;
  z-index: -1;
}

/* ----- Border Header ----- */

.border-header {
  -moz-border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-header-3ed16cc10a03ba439a2f1939156f9ffc.png") 0 22 22 30 repeat;
  -webkit-border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-header-3ed16cc10a03ba439a2f1939156f9ffc.png") 0 22 22 30 repeat;
  border-image: url("http://d35nyfeeu8zws1.cloudfront.net/assets/border-header-3ed16cc10a03ba439a2f1939156f9ffc.png") 0 22 22 30 repeat;
  border-style: solid;
  border-width: 0px 22px 22px 30px;
  color: #fff;
  position: relative;
}

.border-header:after {
  background: #000;
  content: "";
  bottom: -5px;
  left: -15px;
  position: absolute;
  right: -5px;
  top: 0;
  z-index: -1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................