Take the 2-minute tour ×

I want to be able to apply a gradient to a border without applying the gradient to the element itself. The webkit documentation for doing this implies that it should be possible, but I can't come up with a way of creating a black box, with a gradient border around it. As far as I can tell, its a bug with webkit. Here's my CSS:

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

If you try this code for yourself and run in chrome or safari, youll see that webkit applies the border-image gradient to the entire element rather than to just the border. Is there any way to accomplish what I'm looking for with CSS, without using any images? Thank you!

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

The border-image implementation in WebKit (and, I believe, all currently released browsers) is based off the 2008 draft of the Backgrounds and Borders module. What you want is the currently specced behaviour with the fill keyword:


Unfortunately you'll have to go with a solution like Gareth's until the browsers catch up with the spec.

share|improve this answer
add comment


I got it to work... and the browsers still don't allow you to change the fill keyword.

share|improve this answer
add comment

If your not averse to adding a non-semantic div into your markup, you could try putting a div within a div to acheive the effect your after like this:

   <div id="fauxborder">
         ...content here...
   ...more stuff


#fauxborder {
    background-image: -webkit-gradient(...)
#fauxborder div {
share|improve this answer
add comment

Your Answer


