search

Home  >  Q&A  >  body text

Are border gradients compatible with border-radius?

<p>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. </p> <pre class="brush:php;toolbar:false;">-webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre> <p>Is there a way to have these two CSS properties take effect at the same time, or is this not possible? </p>
P粉824889650P粉824889650489 days ago506

reply all(2)I'll reply

  • P粉418854048

    P粉4188540482023-08-22 18:31:09

    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.

    reply
    0
  • P粉710454910

    P粉7104549102023-08-22 13:21:05

    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.

    reply
    0
  • Cancelreply