How would I create a radial gradient in my border?

Question

I'm trying to accomplish the following:

Basically, this is just a block element:

<div></div>

div {
    width: 100px;
    height: 100px;
}

How would I put the radial gradient image inside the top left of the elements border?

Answer 1

You can use border-image with some radial-gradient like this:

HTML:

<div><div>

CSS:

div {
  width:200px;
  height:200px;
  background:blue;
  border-style:solid;
  border-image:-webkit-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
  border-image:-moz-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8; //Will work starting with FF29.
  border-image:radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
}

Here is the Fiddle

NOTE: Unfortunately Internet Explorer does not support this yet. The current version of Firefox (29.0.1) does have support, but all previous versions including ESRs won't render it correctly, and there is nothing on the horizon for IE, and all past versions will never support this method. If you need to support any versions of IE, you'll need to use another method, such as using a pseudo-element :before.