CODEWITHSUNDEEP
webkitcss
D-Nice
D-Nice

Reputation: 4870

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

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;
    background-color:#000;
    -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!

Upvotes: 1

Views: 2483

Answers (3)

Gareth
Gareth

Reputation: 5718

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:

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

CSS:

#fauxborder {
    width:95px; 
    height:95px; 
    background-image: -webkit-gradient(...)
}
#fauxborder div {
    margin:10px;
    background-color:#000
}

Upvotes: 0

android.nick
android.nick

Reputation: 11215

http://jsfiddle.net/nicktheandroid/b875w/1/

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

Upvotes: 0

robertc
robertc

Reputation: 75777

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:

The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

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

Upvotes: 3

Related Questions