CodePen

HTML

            
              <div id="wrap">
  <h1>Gradient borders</h1>
  <div class="box-wrap">
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae necessitatibus quos esse nisi sed explicabo unde omnis excepturi ratione hic eligendi iusto voluptatem voluptate! Sit a nostrum ut expedita alias quaerat ea ratione animi harum perspiciatis dolorem deleniti aliquam velit vel non obcaecati ducimus. Nisi excepturi debitis dolorem natus veritatis labore eligendi architecto quasi laudantium ipsam cum doloribus veniam sint error aliquam voluptate alias reiciendis neque nam quo iure dolorum dolores earum eveniet voluptatum. Veniam quas ipsum molestiae officia sed necessitatibus ad numquam vitae aperiam facere quibusdam minus nostrum maxime error accusantium cum nulla illo quis ipsa dolor magni nobis!</div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $color1: #09f;
$color2: #6c3;
$color3: #c33;

.box{
  padding: 1rem;
  background-color: #fff;
  text-align: left;
}

.box-wrap{
  display: inline-block;
  width: 70%;
  padding: 5px;
  background-image: -webkit-linear-gradient(left, $color1, $color2, $color3, $color2, $color1);
  background-image: -moz-linear-gradient(left, $color1, $color2, $color3, $color2, $color1);
  background-image: -ms-linear-gradient(left, $color1, $color2, $color3, $color2, $color1);
  background-image: linear-gradient(left, $color1, $color2, $color3, $color2, $color1);
  border: 1px solid #666;
  box-shadow: 0 0 5px #333;
}

/* styling */
 html {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
	overflow-x: hidden;
	overflow-y: hidden;
}

body {
	text-align: center;
	display: table;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}

#wrap {
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Trying to implement a mockup of my website back at 2010
// http://aklp.deviantart.com/art/AkART-162828154
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................