<body> <h1>Prashant Says hello! - <a href="https://www.prashant.me/development/2016/01/03/rainbow-border-with-linear-gradient-in-s-css.html">prashant.me</a></h1> </body>
$gradient_ : 90deg, #1abc9c 15%, #2ecc71 15%, #2ecc71 12%, #3498db 12%, #3498db 32%, #9b59b6 32%, #9b59b6 35%, #34495e 35%, #34495e 55%, #f1c40f 55%, #f1c40f 59%, #e67e22 59%, #e67e22 63%, #e74c3c 63%, #e74c3c 82%, #ecf0f1 82%, #ecf0f1 92%, #95a5a6 92%; $size_ : 100% 7px; body{ background-image: -webkit-linear-gradient($gradient_); background-image: -khtml-linear-gradient($gradient_); background-image: -moz-linear-gradient($gradient_); background-image: -o-linear-gradient($gradient_); background-image: linear-gradient($gradient_); background-repeat: no-repeat; background-position-y: top; -webkit-background-size: $size_; -khtml-background-size: $size_; -moz-background-size: $size_; -o-background-size: $size_; background-size: $size_; h1{ text-align: center; margin: 20px 0 0 0; } }