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
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; }
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;
}