css - Gradient borders

ID : 10067

viewed : 31

Tags : cssgradientcss

Top 5 Answer for css - Gradient borders

vote vote

98

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

vote vote

81

instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

a simple example:

.g { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255))); background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% ); padding: 2px; }  .g > div { background: #fff; }
<div class="g">     <div>bla</div> </div>


EDIT: You can also leverage the :before selector as @WalterSchwarz pointed out:

body {     padding: 20px; } .circle {     width: 100%;     height: 200px;     background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);     border-radius: 100%;     position: relative;     text-align: center;     padding: 20px;     box-sizing: border-box; } .circle::before {     border-radius: 100%;     content: '';     background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);     top: -10px;     left: -10px;     bottom: -10px;     right: -10px;     position: absolute;     z-index:-1; }
<div class="circle"></div>

vote vote

76

border-image-slice will extend a CSS border-image gradient

This (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.

body{   border: 16px solid transparent;   border-image: linear-gradient(45deg, red , yellow);   border-image-slice: 1;   height: 120px;   border-radius: 10px;  // will have no affect }

vote vote

69

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders  border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;  

http://www.cssportal.com/css3-preview/borders.htm

vote vote

54

Try this, works fine on web-kit

.border {       width: 400px;      padding: 20px;      border-top: 10px solid #FFFF00;      border-bottom:10px solid #FF0000;      background-image:           linear-gradient(#FFFF00, #FF0000),          linear-gradient(#FFFF00, #FF0000)      ;      background-size:10px 100%;      background-position:0 0, 100% 0;      background-repeat:no-repeat;  }
<div class="border">Hello!</div>

Top 3 video Explaining css - Gradient borders

Related QUESTION?