0

I'm trying to create a box with faded borders. I've managed to find so examples but I can't create what I hoping to accomplish.

    border:3px;
-webkit-border-image:-webkit-gradient(linear, 0 0, 0 100%, from(#382E5C), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:-webkit-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:-o-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:-moz-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%;

That css give me cool fading borders on both side, but I also want the top border to stay a solid color. How do I make the top border solid, and keep the sides fading, transparent on the bottom. Thank You

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
Philippe Allaire
  • 77
  • 1
  • 8
  • Border-image affects the whole element. One suggestion is placing the element in another div, and set border-top:1px solid #000. – Jens Andersson Oct 04 '12 at 06:14

1 Answers1

0

Please try this: if we use border-top the border will stay only in top place.

border-top: 3px solid red; 
/***
------add your fading borders
***/

if you not understand please give me your code...

suresh gopal
  • 3,138
  • 6
  • 27
  • 58