Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
The border-image property allows you to specify an image that will take the place of any border styles. Now in theory this will allow you to decorate your borders any way you wish. However, it can be a little tricky to understand it first. So before we get into actually working with it let's take a moment and review the syntax and how border images are executed. Although the backgrounds and borders module specifies several independent properties for border-image, currently browsers only support the shorthand notation. The shorthand notation allows us to specify the border-image-source, the border-image-slice, the border-image- width, the border-image-outset, and the border-image-repeat.
Now currently there is no support for border-width and border-image-outset values in the shorthand notation. So we're going to focus on border- image-source, slice, and repeat. Border-image-source is pretty easy to understand. You simply pass the path to the border-image via the URL method. Now if you've ever specified a background image it works exactly the same way. Remember that the path is relative to the location of the CSS it's specified in. Now perhaps the trickiest bit to understand is the border-image-slice value.
If you've ever used 9-slice scaling, you'll pick up on this right away since that's basically what we're doing. If you haven't, I've found the concept gets a little easier once you're able to visualize it. Wrapping an image all the way around an element just wouldn't work. What happens if your element and image are different sizes? What would happen if the size of the element changes? Now to allow for this your border- image is sliced into nine separate pieces, as you can see here. The pieces are then mapped to their respective corners and sides.
The sides can then be repeated or stretched if the box changes sizes, while the corners are preserved. That's good stuff, right? Well, there are a few things that you need to know about slicing your border-image. First, you can pass up to four values for image slices. These can be percentages, or pixels, but oddly enough percentages need the percentage symbol, while pixels are just represented as numbers. Go figure. Now, the values tell the browser exactly where to slice a long image to create the nine slices.
If you pass four values, you are specifying top, right, bottom, and left values in that order. Three values refer to top, right, and left, and bottom. Two values refer to top and bottom, and right and left, while a single value uses the same value for each slice. A one more very important thing here. The specification says that absent the keyword "fill," browsers should discard the middle slice. Well they don't.
The middle slice is layered on top of the background and can be very, very annoying for those that aren't prepared for it. Until this behavior changes you have to account for the middle slice or as we're going to do in our example, make the middle of the border image transparent. Now, next step is the border-image-repeat property. It essentially controls how the image slices are mapped to your element's border. There are three possible values here: stretch, repeat, and round.
Stretch is the default and it will simply stretch the slice along the side to fill the available space. Now this is really good for solid colors or simple images that aren't hurt by scaling. Round and repeat are similar, but have a couple of very important differences. Repeat simply tiles the image slice repeatedly until the available space is filled. Round on the other hand repeats the image in a series of tiles, but if the repeating tiles don't fit exactly it will then scale the image tiles until they do.
This is a really good choice for sides that need to seamlessly match the corner tiles. It's also worth pointing out here that in terms of practical application, WebKit browsers render round and repeat exactly the same at the moment. I have noticed, however, that in Firefox repeat can cause gaps in the meeting point between the corner, tiles, and sides. So for the time being I recommend using round when you need to repeat tiles, until the implementations evolve. Now you can also choose to have the top and bottom and right and left repeat independently if you'd wish.
If you pass two keywords for repeat, the first will apply to the top and bottom sides and the second will apply to the left and right. One more thing. Border images are useless without a specified border width. You need to declare the proper border width of the border image in order for to display it correctly. Now, I should mention that this needs to be defined as a separate property. Remember border-width as part of the shorthand notation is currently not supported. Now due to the way the browser seem to render the border image I recommend specifying about twice the border width value of your actual border image.
Support for the border-image is pretty broad, although Internet Explorer 9's implementation isn't confirmed as at the time of this recording. The Firefox and WebKit browsers still need to vendor prefixes, although Opera works with the specifications default shorthand syntax. Now hopefully that gives you a good idea as to how border-image works. In our next movie we'll put this into practice by applying a border image to one of our elements.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.