Revisions to How to do gradient borders in CSS

code snippet

Source Link

edited Jul 10, 2024 at 4:58

7.8k
5
53
95

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

Read more on MDN.

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

Read more on MDN.

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

Read more on MDN.

deleted 180 characters in body

Source Link

edited Sep 14, 2022 at 4:36

temporary_user_name

37.3k
48
165
246

WebKit nowThe (and Chrome 12 at least) supports gradients as border image:border-image property can accomplish this. You'll need to specify border-style and border-width too.

-webkit-border-image: -webkitlinear-gradient(linear, left top, left bottom, from(#00abeb)#f6b73c, to(#fff#4d9f0c), color30;
border-stop(0.5, #fff),width: color4px;
border-stop(0.5, #66cc00)) 21 30 30 21 repeatstyle: repeat;solid;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support:Read more on http://caniuse.com/#search=border-image MDN.

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

Read more on MDN.

caniuseit link to see which browsers support it

Source Link

edited Mar 26, 2013 at 20:56

Pickels

34.7k
26
121
181

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image