I’ve been working on a small website, just as an exercise for integration. But as I don’t have an extended knowledge of CSS, I do not know if it is possible in the end :
I have in the website a form, with text boxes surrounded by a border, on which I applied a blend mode in Photoshop. Curious to know if it existed in CSS, I quickly tried it out, but got stuck trying to apply mix-blend-mode only on the border.
Is there anyway to do it, or a selector which would allow me to reach only the border and nothing else ?
Thanks for your answers !
2
Answers
You can use
border-image
property but be prudent with modern browser support, speicifically IE.See browser support here
Here is an approach that looks like nice multicolor border
Snippet below
Changing the
padding
of.border-gradient
will change the “border” width.Please note that creating cross-browser background gradients is not yet trivial. I recommend using an online tool, such as this one – not endorsed or recommended, find another if you don’t like it :).
Here it is with
blend-mode
: