Can we add a gradient color to border-bottom
property of a html block elements?
Border should be something similar to this -
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%);
}
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.
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 .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With