blue border and header

Hi,

In CSS, I forget how to make a border around a div with a box  header that has a  gradient color blue.
If the browser cant handle the gradient color then I need it to still display a color.
Can someone give me an example please.
jagguyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Not sure what you mean exactly
Something like this?
http://jsfiddle.net/GaryC123/7k00kg3d/
0
GaryCommented:
Or something like this
http://jsfiddle.net/GaryC123/7k00kg3d/2/

div {
    height:200px;
    width:200px;
    border:5px solid blue
}
div div {
    height:35px;
    border:none;
    background: -webkit-linear-gradient(blue, lightblue);
    background: -o-linear-gradient(blue, lightblue);
    background: -moz-linear-gradient(blue, lightblue);
    background: linear-gradient(blue, lightblue);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jagguyAuthor Commented:
Yes the last one, with a heading in it

What happens if it cant display the gradient for older browsers?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

jagguyAuthor Commented:
Also the div have class names ? as I need to reproduce it
0
GaryCommented:
If you are just worried about IE8 then add to the css

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='lightblue', GradientType=0 );

Open in new window

You shouldn't need to worry about the other browsers as they tend to self update to the latest version anyway which all support CSS3
0
GaryCommented:
Then just add your class names and use them in the css instead of div
0
COBOLdinosaurCommented:
If you need a fallback for browser that don't support gradients just put background:blue; ahead of the gradient declarations and the browsers that can't do gradients will use the blue because they ignore the linear-gradient that they don't understand.

Cd&
0
HainKurtSr. System AnalystCommented:
just add another line inside css like this:

background-color:blue;
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.