0

I am having trouble figuring out how to create an element that can meet the following requirements:

  1. have a transparent background as to allow it's parent's background to come through
  2. have a border radius
  3. have a linear gradient border

My current implementation can satisfy all but 1. 

<div class="box">
</div>

html {
    background: red;
}

.box {
    width: 400px;
    height: 400px;
    border-radius: 8px;

    background: black;
    background-clip: padding;
    border: none;
    margin: 40px;
    position: relative;

    &:before {
        border-radius: inherit;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -4px;
        z-index: -1;
        background: linear-gradient(#8800cc, #fff)
    }
}

I've also seen other implementations that allow for 1 and 3, but not 2 via border-images.

Is there any solution (even if it's on the bleeding edge of browser support) that can meet all 3 requirements?

jchi2241
  • 2,032
  • 1
  • 25
  • 49
  • SVG might be the way to go - https://stackoverflow.com/q/46029719/483779 – Stickers Jul 10 '19 at 19:20
  • you could use the pseudo to draw the border-image but radius and overflow on the parent : https://codepen.io/gc-nomade/pen/mZvKQE If that is your answer, let us know. – G-Cyrillus Jul 10 '19 at 19:50

0 Answers0