Comments on: Gradient Borders in CSS

By: Geoff Graham

Geoff Graham — Fri, 03 Feb 2023 15:18:05 +0000

Aaaaaaand another from reader Rogério Chaves:

You can just add clip-path: inset(0 round 5px)

By: Geoff Graham

Geoff Graham — Mon, 21 Nov 2022 14:22:56 +0000

Another one from reader Blaz Kemperle:

I needed a responsive button with border-gradient and radius and transparent background, and after the developers "it can't be done" I coded it by myself.

By: Chris Coyier

Chris Coyier — Mon, 31 Jan 2022 19:41:21 +0000

From reader Fabian Michael:

Hi, I found another solution to the problem, based on the good old 9-slice scaling technique. The CSS is rather extensive, but it does not need any extra SVG elements in your document or any additional elements nesting and might be interesting for some of you:

By: Alex Overbeck

Alex Overbeck — Fri, 19 Apr 2019 20:19:38 +0000

I was able to come up with a pretty simple, single element, solution to this using multiple backgrounds and the background-origin property.

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

The nice things about this approach are:
1. It isn’t affected by z-index
2. It can scale easily by just changing the width of the transparent border

Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

By: sonya brimecombe

sonya brimecombe — Mon, 07 Jan 2019 21:44:31 +0000

In reply to Brad Kemper. yep i agree I would of done the same thing as well.

By: Klesus

Klesus — Tue, 01 Jan 2019 22:58:50 +0000

Been playing around with the Stephen Shaw’s ::before border. I tried applying it to one of my working projects and it seems that if you apply any sort of transform to the base element, then the pseudo element overrides the background color/image of the base element. I don’t know any way to make this work together with transform, just something to keep in mind, and a challenge to find a workaround.

By: Jupago

Jupago — Tue, 01 Jan 2019 17:55:03 +0000

Thanks for writing this! I used the first option recently when a student wanted to have a gradient border animated.
Worked out pretty well: https://codepen.io/jupago/ Did not know about border-image-slice. Might also be fun to try clip-path. That 24ways article on Clip Paths got me wondering if that will eventually be the the next best thing. https://24ways.org/2018/clip-paths-know-no-bounds/

By: SelenIT

SelenIT — Tue, 01 Jan 2019 12:43:48 +0000

In reply to Anders Grimsrud. Looks much like a Chromium bug in the cascade. Interestingly, Chrome DevTools in both "Styles" and "Computed" tabs displays the value 1 of border-image-slice struck-through, and Computed styles tab shows the value 100% coming from the shorthand declaration as overriding it — as it should be — but the value 1 appears to somehow mysteriously "survive" this overriding. As a side note, I disagree that border-image (as well as its longhand sub-properties) is "obtuse". It's arguably the most misunderstood CSS properties of all time, and maybe significantly underrated, especially in combination with SVG images. Some of its abilities like 9-slice scaling and — especially — painting things outside the element's box (via border-image-outset) are unique in CSS, and can provide much shorter and cleaner solutions to many cases that otherwise would require hacking around pseudo-elements or even extra markup.

By: George W. Park

George W. Park — Mon, 31 Dec 2018 14:49:13 +0000

I have a pen showing how you can use background-clip to create rounded gradient borders https://codepen.io/GeorgePark/pen/EEGJEj

By: ccprog

ccprog — Sat, 29 Dec 2018 18:22:11 +0000

Here is a variant with SVG: https://codepen.io/ccprog/pen/BvwbKX?editors=1100 It tries to expose as many specifics to CSS as possible. Note that SVG 2 would allow rx/ry to be defined as CSS properties, but implementation is as yet incomplete. Gradient positioning must also be done in the markup. Border positioning follows SVG rules, which means half the border overflows the box.

By: Joe Kotlan (@Jkotlan)

Joe Kotlan (@Jkotlan) — Sat, 29 Dec 2018 14:50:16 +0000

Not sure about the last two. I’m getting different results in iOS Safari. I’d give it a look.

By: Brad Kemper

Brad Kemper — Fri, 28 Dec 2018 21:26:44 +0000

In reply to Anders Grimsrud. Shorthands do normally reset the longhands to their initial values when left out, so I don’t know why Chrome and Opera wouldn’t. The last example seems to be fixed in iOS12 by changing border-image to border-image-source in those two classes.

By: Chris Coyier

Chris Coyier — Fri, 28 Dec 2018 20:48:42 +0000

In reply to Brad Kemper. I'm sure everyone would enjoy having a demo like that to reference, including me!

By: Anders Grimsrud

Anders Grimsrud — Fri, 28 Dec 2018 18:49:48 +0000

Funnily enough, browser support seems to be inconsistent for the last example. When border-image-slice is declared in advance and there's no value for slice set in the border-image shorthand, as in the example above, Firefox 64 and Safari on iOS 12 uses the default slice value (which is 100%, resulting in border-image: <image> 100%;) while Chrome 71 and Opera cascades the previously declared value into the shorthand (which gives border-image: <image> 1;).

By: Doug S.

Doug S. — Fri, 28 Dec 2018 18:34:34 +0000

Wasn't working for me on Firefox 64 until I changed the border-image to border-image-source as border-image-slice: 1 was being overridden in the cascade.