{"id":2536,"date":"2011-03-29T00:18:55","date_gmt":"2011-03-29T04:18:55","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=2536"},"modified":"2012-08-31T15:01:08","modified_gmt":"2012-08-31T19:01:08","slug":"pixel-perfect-css3-border-image-in-depth","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/03\/29\/pixel-perfect-css3-border-image-in-depth\/","title":{"rendered":"Pixel Perfect CSS3 border-image<\/code> In Depth."},"content":{"rendered":"
\n

This is an example of CSS3 border-image<\/code> in action. Browsers that don’t support it will see a normal solid coloured border<\/code>, while modern browsers will see a nice framed border-image<\/code>. Note that the clouds are produced with an additional background-image<\/code>, showing the possibility of having separate images for borders and backgrounds.<\/p>\n<\/div>\n

The border-image<\/code> property is something I’ve been wanting for a long time. For years, I have been cutting up images into several pieces in order to emulate this effect (the most recent example of this was used in this demo<\/a> of the CSS3 Font Converter<\/a>). The difference is that CSS3’s border-image property uses only one image and two lines of CSS<\/strong> (well … 6 if you include the vendor-specific properties and the fallback for browsers that don’t support it).<\/p>\n

Since it is newly implemented in most web browsers, there are a few gotchas that developers should be aware of before implementing border-image<\/code>. This article will cover these caveats, a tool that you can use to help generate border-images effectively, and a few things you should keep in mind so that pages don’t look funny in browsers that don’t support border-radius<\/code>. <\/p>\n

Let’s Look At An Example<\/h2>\n
\n

This is an example of a block level element that uses the border-image<\/code> property. The border-image<\/code> is viewable in all major browsers except for IE (more on that later). It uses only one image<\/strong> to produce the border — no images were cut-up into pieces or harmed in any other way. The code to generate this border is fairly straight-forward once you know how it works:<\/p>\n

\n
\r\n#object {\r\n \r\n   \/*\r\n    * These border widths must match the border-image numbers.\r\n    *\/\r\n    border-width: 23px 22px 22px 26px;\r\n \r\n   \/*\r\n    * Note that all browsers use their respective vendor prefix.  Also \r\n    * note that, unlike the border-width values, the widths in the \r\n    * border-image property don't have the 'px' unit at the end.\r\n    *\/\r\n   -moz-border-image:    url('image.png') 23 22 22 26 round round;\r\n   -webkit-border-image: url('image.png') 23 22 22 26 round round;\r\n   -o-border-image:      url('image.png') 23 22 22 26 round round;\r\n   border-image:         url('image.png') 23 22 22 26 round round;\r\n\r\n   \/*\r\n    * You should include a border-color and border-style as a fallback\r\n    * for browsers that don't support border-image (and to prevent \r\n    * this known issue that happens in certain versions of Firefox:\r\n    * https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=748253 (thanks to \r\n    * Lith for pointing this out).\r\n    *\/\r\n    border-color: #cccccc;\r\n    border-style: solid;\r\n }\r\n<\/pre>\n<\/blockquote>\n
\nThe original image looks like this:
\n\"image
\nIt is an edited version of an image produced by Free Printable Borders<\/a>.\n<\/div>\n<\/div>\n
Note that the image repeats to the size of the block it borders.  When you design a border-image<\/code>, the border should tile in a similar way that a background-image<\/code> does.  There are some major differences though, so let’s show in depth how border-image<\/code> is used, and introduce you to the tool that will help even the laziest developer in the world (i.e. me) create them quickly.<\/p>\n
Basic Syntax<\/h2>\n
Note that the basic CSS is quite easy if you know how border-width<\/code> works:<\/p>\n
\n
\r\n#selector {\r\n\r\n  border-width: <top-width><\/em>px <right-width><\/em>px <bottom-width><\/em>px <left-width><\/em>px;\r\n\r\n  border-image: url(<image-url><\/em>) <top-width><\/em> <right-width><\/em> <bottom-width><\/em> <left-width><\/em> 
\r\n                <horizontal-effect><\/em> <vertical-effect><\/em>;\r\n\r\n}\r\n<\/pre>\n<\/blockquote>\n
Note that if you are measuring your widths in pixels, then you must put the px<\/code> unit inside the border-width<\/code> declaration, but you must leave it out in the border-image<\/code> one.  I know it doesn’t seem logical, but it’s just the way it is.<\/p>\n
To illustrate the all of the border-image<\/code> parameters, let’s take this image:<\/p>\n
\n\"image\n<\/div>\n
First we must grab the border widths in the right order:<\/p>\n
\"A<\/a>
A diagram showing how the borders widths are ordered.<\/p><\/div><\/p>\n
(Note that the order of the border-image<\/code> widths is consistent with the order that margin<\/code> and padding<\/code> uses).  <\/p>\n
Now, let us apply effects on our image.<\/p>\n\n\n\n\n\n\n\n
Pure CSS Example (will be visible if your browser supports border-image<\/code><\/th>\nFirefox Screenshot (Opera and Webkit are similar, except for the round<\/code> effect, which Chrome and Safari currently don’t support.)<\/th>\n<\/tr>\n<\/thead>\n
\n
\nThis is an example of a stretched border.  Note that the square in the corner remains intact, while the other squares are the ones that stretch.\n<\/div>\n<\/td>\n
\n\"Screenshot\n<\/td>\n<\/tr>\n
\n
\nThis is an example of a repeated border.   You’ll note that the browser will apply symmetry  on the border, so that it looks “balanced”.\n<\/div>\n<\/td>\n
\n\"Screenshot<\/p>\n<\/td>\n<\/tr>\n
\n
\nThis is an  example of a rounded border.  In this example, the browser tries to “round” the widths and lengths of the squares so they are not abruptly cut off.  Currently, this property is only supported by Firefox and Opera.<\/strong>\n<\/div>\n<\/td>\n
\n\"Screenshot\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
But I Hate<\/em> Counting Pixels!<\/h2>\n
If you are the laziest developer in the world (i.e. me), you don’t want to crack open your graphics editor, open up a image file and count the pixels by hand – you want a tool that will generate the CSS for you.  After all, don’t we use computers so that they will do things for us?  At least, until they take over the world?<\/a><\/p>\n
I was in the middle of creating my own tool, but I noticed that  Kevin Decker<\/a> beat me to it with his excellent Border Image Generator<\/a>.  You can take any image, from the web or your desktop, drag a few sliders around, and voilá!<\/em>, you have your code, vendor-prefixes and all. You should definitely check it out if you are as lazy as I am.<\/p>\n
Percentage Widths<\/h2>\n
The border-image<\/code> property can also take percentage values, which correspond to the image’s width in height.  For example, let’s take this 81×81 image:<\/p>\n
\n\"image\n<\/div>\n
As you recall, we used the following pixel dimensions:<\/p>\n
\n
\r\nborder-image: url('\/border-image\/images\/borders\/chain.png') 23 22 22 26 round;\r\n<\/pre>\n<\/blockquote>\n
If you wanted to convert the pixel widths to percentages, you must take each value and divide it by either the entire width of the border-image<\/code> (for the left and right widths) or by the height of the border-image<\/code> (for the top and bottom widths).  In the above case:<\/p>\n