Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Border Image: Part 2

Border Image: Part 2

4:25

In this video, you'll learn how the stretch value in the border-image property allows you to specify how an image is applied to a border. Additionally, you'll see several examples where border-image can be quite useful.

  • 0:00

    [? music playing ?]

  • 0:02

    [Think Vitamin Membership, membership.thinkvitamin.com]

  • 0:07

    [CSS3 Borders, Border Image: Part 2 with Nick Pettit]

  • 0:13

    Now that we've gone over the first couple values, let's take a look

  • 0:16

    at the next value, which is called the stretch value.

  • 0:19

    At the end of the border image property,

  • 0:22

    is the stretch value.

  • 0:25

    For the initial examples, I just typed in round

  • 0:28

    for the sake of simplicity.

  • 0:30

    However, the stretch value is optional, and if you don't

  • 0:33

    specify anything, the default is stretch.

  • 0:36

    The possible values for the stretch value

  • 0:39

    are stretch, round, and repeat.

  • 0:42

    Let's take a look at what stretch looks like.

  • 0:45

    So I will type in stretch for

  • 0:48

    each one of the properties, here.

  • 0:51

    And we'll flip over to Google Chrome and you can see

  • 0:54

    that we have quite a different result than before.

  • 0:58

    If we switch over to Firefox,

  • 1:01

    we should see the same thing.

  • 1:04

    Stretch will simply stretch out the border, and, as you can see,

  • 1:07

    pixelation, in many cases, will occur.

  • 1:10

    However, this might be what you want.

  • 1:12

    I also mentioned that one of the possible values

  • 1:15

    is repeat, so let's give that a try.

  • 1:24

    Repeat, in this case, looks

  • 1:27

    exactly the same as round in both browsers.

  • 1:31

    This is because I did the math very carefully on our

  • 1:34

    original border image and the border slice

  • 1:37

    and border width were both set to 25,

  • 1:40

    which is the exact width of each one of the diamonds.

  • 1:44

    Now let's say we were to change the width of our border

  • 1:47

    when we have border image set to repeat.

  • 1:50

    Tha't s what it looks like in Firefox,

  • 1:54

    and that's what it looks like in Google Chrome.

  • 1:57

    You can see along the edges here that it's being cut off

  • 2:00

    and that some pixelation is occuring because it's

  • 2:03

    trying to stretch out the border image to fill

  • 2:06

    the width of the border.

  • 2:08

    If we type in round into the stretch value

  • 2:11

    instead of repeat, we should be

  • 2:14

    able to fix this problem.

  • 2:17

    Here's what it looks like in Firefox, and you can see that

  • 2:20

    our border image looks correct again.

  • 2:23

    Basically, if the border doesn't make it all the way

  • 2:26

    across, round will try to stretch out

  • 2:29

    each one of the repeated bits until it makes it

  • 2:32

    to the other side of the element.

  • 2:34

    Now let's take a look at this in Google Chrome.

  • 2:37

    After refreshing the page, you can see that the

  • 2:40

    problem is still not corrected.

  • 2:42

    The stretch value currently behaves

  • 2:45

    slightly differently in webkit and in Firefox.

  • 2:48

    This will most likely be corrected once the

  • 2:51

    specification has been finalized by the W3C,

  • 2:54

    but for now it's just a weird inconsistency to be aware of.

  • 2:58

    Now that you know how Border Image works, you're probably wondering

  • 3:01

    what can I use it for?

  • 3:03

    Well, here are a few examples.

  • 3:05

    Border Image is best used for creating complex borders

  • 3:08

    like the one you see here.

  • 3:10

    Normally, a border like this would require

  • 3:13

    lots of images, tables, ugly mark-up hacks

  • 3:16

    and it would be really difficult to pull off,

  • 3:19

    but Border Image makes it very easy.

  • 3:22

    [John Resig:border-imagein Firefox, ejohn.org/blog/border-image-in-firefox/]

  • 3:24

    Another great example comes from John Resig's blog, where he talks about how

  • 3:27

    you can use Border Image to create iPhone buttons.

  • 3:29

    This is a really great use case because, again, instead

  • 3:32

    of having a whole bunch if images, you can just have a single image,

  • 3:35

    which is a lot smaller and saves on bandwidth,

  • 3:38

    which is good for mobile devices.

  • 3:40

    Another example is tabs.

  • 3:43

    [A List Apart:Sliding Doors of CSS, alistapart.com/articles/slidingdoors]

  • 3:45

    If you're familiar with the sliding doors technique, to implement it across different browsers.

  • 3:48

    However, the advantage to the sliding doors technique

  • 3:51

    is that it allows you to create complex borders.

  • 3:54

    Border Image gives you the best of both worlds by allowing for the

  • 3:57

    complex borders without the use of all these different

  • 4:00

    images and complex pieces of CSS.

  • 4:03

    And there we have it.

  • 4:05

    Now remember, Border Image is still highly experimental and it works differently

  • 4:08

    across different browsers and doesn't even work in Internet Explorer at all yet.

  • 4:13

    As the W3C gets closer to a final specification for CSS3,

  • 4:16

    you can expect to see Border Image used a whole lot more.

  • 4:19

    [? music playing ?]

  • 4:21

    [Think Vitamin Membership, membership.thinkvitatmin.com]

Show full transcript