Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
As the title states, is it possible to make a gradient border in CSS3 and if so how?
I know that you can make gradient backgrounds and there are many generators for that, but I am yet to find one that creates the code for a gradient border.
1.
Well.. this is no fancy css3 but heres one possible solution:
I made this example for something else before and i just changed the background url of
#childWraphttp://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )
Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.
2.
A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.
OR
http://www.colorzilla.com/gradient-editor/
( http://jsfiddle.net/qD4zd/2/ )
3.
On a third note.. The first method could be made into more flexible one by using actual
<img>tag so that you force the image to be specific height and width.. could even look decent.