Gradient border

[phppup]

I am trying to achieve a BORDER that will have a gradient effect in itself.

border: 24px radial-gradient(red 5%, green 15%, blue 60%);

This isn't working.

The colors are for testing, but ideally,I would have an effect running from a light blue to a darker blue (similar to the lever that adjust the cool temperature in an air conditioner) and they would outline a div box.

A button with an edged border could work too

The key is that I want the gradient to eminate from the center to the outside of the object, not along the border (think of a water droplet in a pond)

 

PS: the radial gradient in a div with rounded corners just isn't aligning the way it's like it.

 

Edited February 7 by phppup
Forgot item

[requinix]

You can't use a gradient as a color. You can apply it as a border-image-source, but that may take some playing around with. But I'm not even entirely sure what effect you're going for, or the overall size/shape of the element you're styling (which will have a huge impact on the appearance of a gradient border).

Or else you can just use a second container element, set the gradient as a background on the parent, then add padding to create the border effect.

[phppup]

I've considered and toyed with the second container idea, but the issue there is that the gradient ellipse is  NOT distributed evenly on the "borders" of my vertically shaped div box (and this ALSO makes formatting text more challenging).

The best alternative (similar effect)  that I can compare to (and may be forced to use) would be a CSS button with a glow effect.

The difference is that I want that trickling off effect to be contained within a specified boundary (a frame) rather than bleeding into the webpage.

Ultimately, I would (hypothetically) have 2 rows of 3 divs each showing different products that are available (ie: ice cream pops, cups, cones, sundaes, cakes, weekly special).

THANKS for helping.

[requinix]

56 minutes ago, phppup said:

I've considered and toyed with the second container idea, but the issue there is that the gradient ellipse is  NOT distributed evenly on the "borders" of my vertically shaped div box (and this ALSO makes formatting text more challenging).

The gradient runs from a single point in the center. Looking at the edges, the gradient will only be uniform if the container is in a circular shape itself - oval, I think. And even then, at 24px wide, you'll probably be stuck with some variation in gradient when comparing the outer and inner edges.

In other words, it sounds like you need a different approach. I suggest keeping it simple: a special SVG that draws lines using your desired gradient, or go old-school and use plain images as in the days before CSS supported fancy borders.