CSS Gradient border

LVL 21
Russ SuterAsked:
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.

Snarf0001Commented:
Just use border-image:

http://jsfiddle.net/vqnk9/4687/

Didn't put any of the prefixes in, just the main one.
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
Russ SuterAuthor Commented:
Perfect and much simpler than the example. Thank you!
0
Snarf0001Commented:
Just to clarify on that, I didn't "bother" putting in the prefixes just for the example, but if you want to maintain compatibility, you still should.

Though it's getting less and less necessary as time goes.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Russ SuterAuthor Commented:
Thanks for that. Honestly I'm not even sure what the prefixes do. I've been a web application developer for years but I got a little behind on CSS and HTML5. I'm playing catch up. Know any good primer resources where I can find out what the prefixes are all about?
0
Snarf0001Commented:
They're basically just for pre-release.
Mainly CSS 3 things, when it's not implemented (or fully adopted), the browser manufacturers start implementing but with their own prefixes.

So -webkit-lineargradient is basically Chrome's version before it was fully adopted.  Don't recall how many versions back that would have been.

But for most of the items, most browsers have adopted the full standard now, and you don't need any of the prefixes (since most users auto-update).
0
Russ SuterAuthor Commented:
Nice to know. Thanks.

I still have no idea what the :before and :after pseudo classes do though. More research...
0
Snarf0001Commented:
You might want to try developer.mozilla.org.

Though personally I think FF is quickly becoming the IE6 of the modern age, the developer site has very good and in-depth descriptions and examples of new elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

::before and ::after are SO incredibly handy, and let you do so many things with the interface without throwing in tonnes of extraneous markup.  The main think to keep in mind, is that they insert content INSIDE the target tag.  So div::before will insert content before the markup content within the div, not actually before the div itself.

So if browsers abide properly, you can't (shouldn't) use them on things like input elements, that can not have children.
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
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.