Ajax Loader
×

CSS gradient border-image tricks

Before creating the experiment I didn't know that gradient borders with CSS is possible. I've tried for several times to apply gradients to borders without using images. So I made my last attempt and it was succesfull, I used border-image: and applied linear and radial gradients to it: border-image: -linear-gradient(color1, color2), if you use just border: -linear-gradient(color1, color2), it doesn't work. So it's possible to make gradient borders using border-image: -linear-gradient(color1, color2) and border-image: -radial-gradient(color1, color2). You can change border styles using percents and, repeat, strech and round values. That's it!

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS gradient border-image tricks

    CSSDeck G+