Forums
View unanswered posts | View active topics It is currently Wed Jul 23, 2014 1:36 pm



Reply to topic  [ 4 posts ] 
 Working with border-image 
Author Message

Joined: Mon Nov 29, 2010 11:49 am
Posts: 6
Post Working with border-image
Hey, has anyone had luck with using border-image with CSS3 PIE? I realize there's only preliminary support, but I'm not sure how far that goes. Syntax, caveats, etc are listed as TODO in the documentation, so I'm making some guesses.

Here's what I'm using:

Code:
div.callout {
   width: 200px;
   border: 20px solid #c5dc6c;   
   behavior: url(/PIE.php);
   -moz-border-image: url(/images/callout_bg_1.png) 20% 20% 20% 20% stretch stretch;
   -webkit-border-image: url(/images/callout_bg_1.png) 20% 20% 20% 20% stretch stretch;
   -pie-border-image: url(/images/callout_bg_1.png) 20% 20% 20% 20% stretch stretch;   
   border-image: url(/images/callout_bg_1.png) 20% 20% 20% 20% stretch stretch;
}


One thing I noticed (in IE6, at least) is that using values of '20' instead of '20%' appears to crash the browser. But this is the first time I've worked with border-image, so there may be something wrong with my syntax. Does anybody see any problems with the above style block?


Mon Nov 29, 2010 12:04 pm
Profile

Joined: Mon Nov 29, 2010 11:49 am
Posts: 6
Post Re: Working with border-image
Ah, crap. I don't have a position: relative in there. Will try again tomorrow...


Mon Nov 29, 2010 8:08 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Working with border-image
Hello there Mr. Herring. Sorry the docs for border-image are so incomplete. Here's a list of the issues I'm immediately aware of:

1) It only supports the 'stretch' scheme. I'd like to support the others in the future but performance is a big concern as it seems it will require creating a separate VML shape for each tile.
2) It doesn't support the outset parameter described in the Backgrounds & Borders module spec, though other browsers don't seem to support that yet either.
3) It doesn't support the width override parameter to the border-image shorthand; it will only use the element's border-width for determining the slice widths (again, support for this in other browsers is spotty too).
4) Related to #3, if the element's border-style is 'none' it will treat that as border-width:0. I actually think this is correct according to a strict reading of the spec, but all the other browsers seem to use the specified border-width value regardless.
5) It requires the 'fill' keyword to be present for the center area to be filled in. This is correct behavior according to the spec but other browsers don't require it and some even fail if 'fill' is present, so it's a bit tricky making it work consistently across browsers.
6) It doesn't hide the element's normal border when border-image is specified. In conjunction with #4 above, this means you have to set the border-style to 'solid' (or something other than 'none') *and* set the border-color to transparent.
7) It seems there are on rare occasion rounding errors which cause 1px gaps between slices of the image. I've also seen these gaps occur in Firefox FWIW.

There are issue tickets open for most of these. Making this better is pretty high on my list for post-beta3 work.


Mon Nov 29, 2010 8:58 pm
Profile

Joined: Mon Nov 29, 2010 11:49 am
Posts: 6
Post Re: Working with border-image
Ah, sweet. Thanks for the clarification, dude! I never even thought of checking the open issues on github. Rock on with ya bad self.


Tue Nov 30, 2010 11:20 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Exabot [Bot] and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.