Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we set a gradient color to border-bottom property? [duplicate]

Tags:

html

css

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%);
}
like image 676
TNK Avatar asked May 20 '14 04:05

TNK


People also ask

Can a border be a gradient CSS?

To show gradients for a border with CSS you can use the border-image property. It allows setting gradient values in the same way as the background-image property. Besides the border-image property, you should specify additional properties to actually show border gradient.

How do you add color to the bottom border in CSS?

The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom .


1 Answers

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.

like image 136
G-Cyrillus Avatar answered Nov 13 '22 04:11

G-Cyrillus