KingOfKong KingOfKong - 11 months ago 46
CSS Question

Adding a top border with multiple non-gradient colors

I would like to add a border on top of my footer that's several different colors like so:

I looked around and I see examples of adding images, or gradients, or multiple colors for different sides but could't find anything for what I want to do.

Answer Source

You can use CSS Gradients for this.

Have a look at the snippet below (you may change the colors according to your requirements):

.border-top {
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 10%, rgba(241,111,92,1) 10%, rgba(246,41,12,1) 10%, rgba(81,24,240,1) 10%, rgba(81,24,240,1) 23%, rgba(240,24,226,1) 23%, rgba(240,24,226,1) 34%, rgba(39,192,230,1) 34%, rgba(39,192,230,1) 46%, rgba(39,230,52,1) 46%, rgba(39,230,52,1) 58%, rgba(76,82,80,1) 58%, rgba(76,82,80,1) 69%, rgba(173,173,173,1) 69%, rgba(173,173,173,1) 81%, rgba(255,0,21,1) 81%, rgba(255,0,21,1) 91%, rgba(255,204,0,1) 91%, rgba(255,204,0,1) 100%);

body {
  margin: 0;
<div class="border-top"></div>

Hope this helps!