Are border gradients compatible with border-radius?

Question

I'm styling an input box with a rounded border (border-radius) and trying to add a gradient effect to the border. I can successfully create gradient and rounded borders, but not both at the same time. Either there are rounded corners but no gradient, or there is 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 have these two CSS properties take effect at the same time, or is this not possible?

Answer 1

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

                                                                                                   

It involves placing a pseudo-element with a gradient background underneath, and cropping it. This works in all current browsers without vendor prefixes or hacks (even IE), but if you want to support older versions of IE you should consider using solid color fallback, javascript and/or a custom MSIE CSS extensions (i.e.

filter, CSSPie-like vector tricks, etc.).

This is a live example (

jsfiddle version):

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

html {
    /* 仅用于显示背景不需要是纯色的 */
    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;
    /* 仅用于显示box-shadow仍然正常工作 */
    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">
    这里有一些文本。<br/>
    这里甚至有一个换行！<br/>
    太酷了。
</p>

The extra styling above is for display:

This works on any background
It works well with
• box-shadow, with or without inset
No need for you to add shadow to pseudo-element

Again, this applies to IE, Firefox and Webkit/Blink browsers.

Answer 2

Probably not possible, according to W3C specification:

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