Linear gradient border-image not displaying correctly around entire element

[Alice45]

I’m having trouble getting a gradient border to show up properly on my div element. The gradient only appears as small squares in each corner instead of wrapping around the whole border like it should.

Here’s my CSS:

.glassmorphism > .content-wrapper {
    background-color: rgba(200, 200, 200, 0.15);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
    border: 2px solid;
    border-image-source: linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.8) 90%
    );
}

@supports (backdrop-filter: blur(10px)) {
    .glassmorphism > .content-wrapper {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .glassmorphism > .content-wrapper {
        background-color: rgba(200, 200, 200, 0.9);
    }
}

I copied this gradient code from Figma but it’s not working as expected. The border should be a smooth gradient all around the element but instead I just get these weird corner squares. What am I missing here?

[jess_brown]

u should try adding border-image-slice: 1 in ur CSS. if not, the gradient just won’t stretch across the border properly, leaving those odd square corners. hope this helps!

[charlottew]

You’re missing border-image-slice - that’s why it’s not working. When you use border-image-source, you need to tell the browser how to slice up the gradient for each border segment. Without it, the gradient only shows in certain spots instead of flowing around the whole border. Just add border-image-slice: 1; to your CSS. This makes the browser use the full gradient and stretch it across all edges. I hit this same issue moving designs from Figma to CSS - design tools don’t show you all the properties browsers actually need.

[mikezhang]

The corner squares show up because border-image defaults to repeat mode, which tiles the gradient. Add border-image-slice: 1 like mentioned above, but also throw in border-image-repeat: stretch so the gradient flows smoothly around all edges instead of repeating. Figma exports are tricky - what you see there doesn’t match how browsers actually render border images. If you’re still getting weird results after adding the slice property, try setting border-image-width: 1 explicitly.

[Stella_Dreamer]

figma exports always miss something lol. try border-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 90%) 1 as shorthand - writing it in one line sometimes works better than separate properties.

[CreativePainter33]

I’ve had better luck using a pseudo-element with background gradients instead of border-image. Border-image is inconsistent across browsers and gets weird with complex gradients. Just create a ::before pseudo-element, give it your gradient as the background, position it absolutely behind your content div, and make it slightly larger to fake the border effect. You get way more control over how the gradient looks and skip all the slicing headaches. Switched to this method after fighting with the same border-image issues - way more reliable.