22

Can we add a gradient color to border-bottom property of a html block elements?

Border should be something similar to this -

enter image description here

Can anybody tell me it is possible in CSS3?

I tried it like this, but couldn't get it to work. 

.border-gradient { 
   border-bottom: 8px solid;
   -moz-border-image: -moz-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
   -webkit-border-image:  -webkit-gradient(left top, right top, color-stop(0%, rgba(92,7,52,1)), color-stop(12%, rgba(134,29,84,1)), color-stop(47%, rgba(255,93,177,1)), color-stop(100%, rgba(83,0,30,1)));
   -webkit-border-image:  -webkit-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
   -o-border-image: -o-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); border-image: linear-gradient(to right, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
}
TNK
  • 4,263
  • 15
  • 58
  • 81
  • @SverriM.Olsen, I checked that question before asking. But I couldn't find any solution with border-bottom property. – TNK May 20 '14 at 05:04
  • Maybe because there isn't one? If there were a solution it would have been posted there. If the answers there suggest that there isn't a solution, then posting the same question again isn't going to make one appear. – BoltClock May 20 '14 at 05:06

4 Answers4

43

Since answer already given, see this as infos.

You may use background-image instead border-image to draw your gradient at bottom.

Gradient can be an image for older browser and a gradient for younger browsers.

Gradient used in border-image are not yet totally supported , Firefox seems still to dislike it.

The use of a background + a padding will do as if a border stands there. DEMO

div {
  text-align:center;
  padding-bottom:5px;
  background: /* gradient can be an image */
    linear-gradient(
      to left, 
      rgba(92,7,52,1) 0%,
      rgba(134,29,84,1) 12%,
      rgba(255,93,177,1) 47%,
      rgba(83,0,30,1) 100%
    )
    left 
    bottom
    #777    
    no-repeat; 
  background-size:100% 5px ;/* if linear-gradient, we need to resize it */
}

NOTICE, that there is no need of a pseudo element, you can as well draw every borders this way and even animate them.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
10

Here we are :)

Have a fiddle - Fiddle link!

I left only the webkit gradient so this works in Chrome. Change appropriately :)

HTML

<div>aaa</div>

CSS

div {
    display: block;
    height: 200px;
    width: 500px;
    border: solid 1px #CCC;
    border-bottom: none;
    position: relative;
}
div:after {
    content:"";
    background: -webkit-linear-gradient(left, rgba(92, 7, 52, 1) 0%, rgba(134, 29, 84, 1) 12%, rgba(255, 93, 177, 1) 47%, rgba(83, 0, 30, 1) 100%);
    display: block;
    height:10px;
    width: 500px;
    position: absolute;
    bottom: 0;
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • Great... this is what I looking for. One question, can we get it to work in IE too? – TNK May 20 '14 at 05:17
  • You can use anything that works as a background in that desired browser :) Also depends on how the browser treats `:after` so you will have to test it out. – misterManSam May 20 '14 at 05:22
  • You missed the padding, so pseudo doesn't lay over/under contents. You can even avoid the use of a pseudo element using background-size and no-repeat : http://codepen.io/anon/pen/CqApt – G-Cyrillus May 20 '14 at 06:19
  • Trial and error will sort out correct padding, I'm sure. The problem with applying a background to the block element itself is you can't apply another background for that element. – misterManSam May 20 '14 at 07:40
  • Yes you could http://codepen.io/gc-nomade/pen/tbgiF. what matters is to know what you do and how to filters (via css) the browsers you are sibbling. if a pseudo is necessary to include browser that do not support multiple backgrounds but does pseudo element, then it's a wise choice to do so :) – G-Cyrillus May 20 '14 at 09:36
  • True, it all really depends on what browser limitations matter the most and providing a fall-back for those less worthy :) – misterManSam May 20 '14 at 12:54
  • Thank you this one works, and all I added is a z-index and that do the rest of the trick, also working on Firefox. – ailia Apr 21 '21 at 14:10
1

We can use CSS Selectors the :after or :before selector

HTML

<section class="seperated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="seperated">Donec sapien sapien, suscipit nec accumsan ac, ornare vel enim.</section>
<section class="seperated">Nulla commodo eros nec lacus cursus mattis.</section>

CSS

section.seperated + section.seperated:before{
content:"";
height:1px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
width:100%;
display:block;
}
Rock Rathore
  • 385
  • 1
  • 5
  • 14
1
<div id="c">aaaaaaaa</div>
<div id="id"></div>

#c {
    height:100px;
    border:1px solid black;
}
#id {
    border: 0;
    height: 10px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
    /* IE6-9 */
}

Fiddle DEmo

Amarnath Balasubramanian
  • 9,300
  • 8
  • 34
  • 62