Start a free Silver 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.


Video Transcript

  • 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

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.