Multi colored border on one side of a div

Question

I found this example which showed what I want to do but it's on the top of the div. I don't understand what in the CSS is telling it to be at the top and what I would need to modify to get it on the bottom border. Thought it would be switching before to after but that did not work

body {
  background: #ccc;
}

.box {
  text-align: center;
  position: relative;
  line-height: 100px;
  background: #fff;
  height: 100px;
  width: 300px;
}

.box:after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

<div class="box">Div</div>

Have you tried replacing `top: 0` with `bottom: 0`? – Lennholm Dec 21 '17 at 15:49 — Lennholm, Dec 21 '17 at 15:49

score 7 · Accepted Answer · answered Dec 21 '17 at 15:49

the border is the :after psuedo element. it is positioned absolutely to the top, right, and left

so if you change top to bottom in .box:after it will move the border to the bottom

    body {
      background: #ccc;
    }
    
    .box {
      text-align: center;
      position: relative;
      line-height: 100px;
      background: #fff;
      height: 100px;
      width: 300px;
    }
    
    .box:after {
      background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
      position: absolute;
      content: '';
      height: 4px;
      right: 0;
      left: 0;
      bottom: 0;
    }

    <div class="box">Div</div>

score 0 · Answer 2 · answered Dec 21 '17 at 15:49

0

Change top: 0; to bottom: 0; and it will add it to the bottom.

The reason is because it's absolute positioned, and top/right/bottom/left tell where the element should be positioned.

answered Dec 21 '17 at 15:49

Tallboy

12,847
13
82
173

score 0 · Answer 3 · 2017-12-21T16:08:23.153

If .box:after pseudoelement is too complicated for you, here's an alternative using border-image.

Border-image-slice will extend a CSS border-image gradient.

body {
  background: #ccc;
}

.box {
  text-align: center;
  position: relative;
  line-height: 100px;
  background: #fff;
  height: 100px;
  width: 300px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(to right, #bcbcbc 25%, #ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  border-image-slice: 1;
}

<div class="box">Div</div>

score 0 · Answer 4 · answered Dec 21 '17 at 15:54

0

You just replace your css top property

.box:after { 
   bottom: 0;//it is replaced by top:0;
 }

answered Dec 21 '17 at 15:54

Manoj A

325
3
6
13

We're looking for long answers that provide some explanation and context. **Don't just give a code answer; explain why your answer is right, ideally with citations.** – Paulie_D Dec 21 '17 at 16:19
Here your code is having a border on the top of the box. So they write css property for box by using top:0; But he wants the border bottom of the box. That's why i i answered like this – Manoj A Dec 21 '17 at 19:46

score 0 · Answer 5 · answered Dec 21 '17 at 15:56

0

body {
 background: #ccc;
}

 .box {
 text-align: center;
 position: relative;
 line-height: 100px;
 background: #fff;
 height: 100px;
 width: 300px;
 }

 .box:after {
 background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, 
 #e84f47 50%, #e84f47 75%, #65c1ac 75%);
 position: absolute;
 content: '';
 height: 4px;
 right: 0;
 left: 0;
 top: auto;
 bottom:0;
 }

answered Dec 21 '17 at 15:56

vishul malik

307
3
9

We're looking for long answers that provide some explanation and context. **Don't just give a code answer; explain why your answer is right, ideally with citations.** – Paulie_D Dec 21 '17 at 16:19

score -1 · Answer 6 · edited Dec 21 '17 at 20:18

-1

Change top in .box:after to 100% like that:

.box:after {
  top: 100%
}

edited Dec 21 '17 at 20:18

tchap

3,412
3
29
46

answered Dec 21 '17 at 15:48

tp4k

65
4

Sofia Kostiunina · Answer 7 · 2017-12-21T16:21:00.507

"what in the CSS is telling it to be at the top " - right: 0; left: 0; top: 0; with an absolute position of an element

" and what I would need to modify to get it on the bottom border." -

change element's location to - right: 0; left: 0; bottom: 0;

<div class="box">Div</div>

 <style>  body { background: #ccc}
         .box {
             text-align: center;
             position: relative;
             line-height: 100px;
              background: #fff;
             height: 100px;
            width: 300px;
               }

        .box:after {
              background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, 
          #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
              position: absolute;
             content: '';
             height: 4px;
           right: 0;
          left: 0;
          bottom: 0;
            }
    </style>

Multi colored border on one side of a div

7 Answers7