Applying a CSS border to an element with -webkit-border-image -


i want able apply gradient border without applying gradient element itself. webkit documentation doing this implies should possible, can't come way of creating black box, gradient border around it. far can tell, bug webkit. here's css:

div {     border-width: 10px 10px 10px 10px;     width: 75px;     height: 75px;     background-color:#000;     -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)) 21 30 30 21; } 

if try code , run in chrome or safari, youll see webkit applies border-image gradient entire element rather border. there way accomplish i'm looking css, without using images? thank you!

the border-image implementation in webkit (and, believe, released browsers) based off 2008 draft of backgrounds , borders module. want currently specced behaviour fill keyword:

the ‘fill’ keyword, if present, causes middle part of border-image preserved. (by default discarded, i.e., treated empty.)

unfortunately you'll have go solution gareth's until browsers catch spec.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -