Can I use border radius with border images with gradients?

Question

I'm designing an input field with a circular border (border radius) and trying to add a gradient to said border. I can successfully make gradients and circular borders, but neither work together. It's either rounded corners without a gradient, or a border with a gradient but no rounded corners.

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

Is there a way to make two CSS properties work together, or is this not possible?

Answer 1

This is possible, and it requires no additional markup , but uses the ::after pseudo-element .

   

It involves placing a pseudo-element with a gradient background underneath and cropping it. This works for all browsers that currently don't have vendor prefixes or hacks (even IE), but if you want to support retro versions of IE, you should consider solid color fallbacks, javascript, and/or custom MSIE CSS extensions (i.e.

Filters, CSSPie - such as vector spoofing, etc.).

This is an example (

jsfiddle version):

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

The extra styling above is for display:

This works on any background
Works fine whether used with or without
• box-shadow, inset
No need for you to add shadows to pseudo elements

Again, this works in IE, Firefox and Webkit/Blink browsers.

Answer 2

According to W3C specification, it may not be possible:

This may be because border-image can take on some potentially complex patterns. If you want a circular image border, you'll need to create one yourself.