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 1

Border Image: Part 1

6:13

In this video, you'll learn how the border-image property in CSS3 allows you to apply images to the borders of an element. This helpful property enables complex borders on dynamically sized elements.

  • 0:00

    [? music playing ?]

  • 0:02

    [Think Vitamin Membership, membership.thinkvitamin.com]

  • 0:07

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

  • 0:13

    Border Image is a new property in CSS3 that,

  • 0:16

    just as the name implies, allows you to apply images

  • 0:19

    to the borders of your elements.

  • 0:21

    Let's take a closer look.

  • 0:23

    In photoshop I've created a premade image

  • 0:26

    for us to work with, and I'll make that a bit bigger so you can see.

  • 0:30

    It's not pretty, but it will help visually show

  • 0:33

    what's going on when we experiment with this new property.

  • 0:36

    Now, you can technically use any image you want,

  • 0:39

    but they way the image is applied to the border

  • 0:42

    is a little bit tricky,

  • 0:45

    and you'll probably want to design an image specifically for your border.

  • 0:49

    When applying the image, you have to tell the browser

  • 0:52

    two different widths.

  • 0:54

    The first width is the actual width of the border,

  • 0:57

    which you should already be familiar with.

  • 1:00

    However, with the border image property, you'll also need to

  • 1:03

    specify how far in you want to

  • 1:06

    cut into the image--more on this later.

  • 1:09

    Border Image does not currently work in Internet Explorer,

  • 1:12

    but we can try it out right now in browsers

  • 1:15

    like Chrome, Safari, and Firefox.

  • 1:18

    Before Border Image came along,

  • 1:21

    there wasn't a great way to make complex-looking borders.

  • 1:25

    You could either use tables or ugly mark-up hacks,

  • 1:28

    or you had to fix the width and the height of an element,

  • 1:31

    apply a background image, and hope that you never have to change

  • 1:34

    the size of the element.

  • 1:36

    Border Image fixes all of these problems.

  • 1:39

    Border Image accepts several values, and they can seem

  • 1:42

    a little bit tricky at first.

  • 1:44

    The first value is the path to your image,

  • 1:47

    and the second set of values are called slices.

  • 1:50

    As you can see here, I've created a basic

  • 1:53

    page for us to work with.

  • 1:55

    There's a div right in the center of the page, and that's the div

  • 1:58

    that we will be applying our border image to.

  • 2:01

    Flipping over to my text editor, you can see

  • 2:04

    the mark-up here--pretty simple stuff.

  • 2:07

    There's a wrapper div and the div I just showed you.

  • 2:11

    And I've also created some basic CSS

  • 2:14

    just to bootstrap the page and make it a little bit

  • 2:17

    prettier to look at.

  • 2:20

    And we will be working in a separate style sheet just

  • 2:23

    for the sake of clarity.

  • 2:25

    First, let's just go ahead and create our

  • 2:28

    border image so you can see what it looks like, and then I'll

  • 2:31

    walk through each part one at a time.

  • 2:34

    First, I'm just going to select my div

  • 2:37

    and then I'm going to type

  • 2:40

    webkit-border-image

  • 2:43

    and then I'm going to type the

  • 2:46

    path to the image

  • 2:54

    then I'm going to specify the border image slice,

  • 2:59

    the stretch value, and then I'm also

  • 3:02

    going to specify a border width, here.

  • 3:07

    And flipping back to the browser,

  • 3:10

    you can see that our image has been applied to the border of our element.

  • 3:14

    The first thing that you'll probably notice is that the

  • 3:17

    element got a little bit bigger when the border was applied.

  • 3:21

    That's because the width margin padding

  • 3:24

    and the border all take up space,

  • 3:27

    so you have to account for the border width.

  • 3:30

    Now, switching back to the text editor, the first thing you probably noticed

  • 3:33

    was the browser prefix.

  • 3:36

    The browser prefix is there so that we can safely

  • 3:39

    experiment with these new CSS3 properties,

  • 3:42

    and, should they end up changing in the final specification,

  • 3:45

    we don't have compatibility problems down the road.

  • 3:49

    Now, just really quick, I would like to also show you

  • 3:52

    that this does work in Firefox.

  • 3:55

    I'll just copy and paste there and change

  • 3:58

    webkit to moz for Mozilla.

  • 4:02

    And I'll switch over to Firefox

  • 4:05

    and you can see that the same border image

  • 4:08

    has been applied--pretty cool.

  • 4:11

    The most familiar part of Border Image is the

  • 4:14

    path, or the URL value.

  • 4:17

    This is similar to background image and other properties,

  • 4:20

    and you should already be familiar with how this works.

  • 4:23

    You just pass the path to your image to the URL function

  • 4:26

    and that's the image that it uses.

  • 4:29

    Now, the next part is called the border slice,

  • 4:32

    and this is a little bit tricky.

  • 4:35

    You'll notice that I did use a pixel value here, but

  • 4:38

    the pixel values do not have the px

  • 4:41

    appended to them like normal.

  • 4:43

    For border slice, you can specify four values

  • 4:46

    just like margin or padding for the

  • 4:49

    top, right, bottom, and left border slice.

  • 4:54

    Let me just go ahead and show you what that looks like so you

  • 4:57

    can get an idea of what I mean.

  • 4:59

    So we have the abbreviated form here, where 25 pixels

  • 5:02

    is being applied to the top, right, bottom,

  • 5:05

    and left border slice.

  • 5:07

    However, we can expand that out

  • 5:10

    and do something like 30, 10,

  • 5:13

    and 5, and when we switch back to our

  • 5:16

    browser, you can see that we get

  • 5:19

    quite a different result.

  • 5:21

    Now, what's happening here is that we're telling our

  • 5:24

    original image to be sliced a little bit differently.

  • 5:28

    The border slice specifies

  • 5:31

    how far into your source image you want

  • 5:34

    the border to slice.

  • 5:37

    The pixel value, or the percentage, is

  • 5:40

    measuring from the edge.

  • 5:42

    The higher the value, the more of the image it will show.

  • 5:45

    And flipping back to our example here, you can see

  • 5:48

    that on the left and on the bottom

  • 5:51

    the border slice has been set to a higher

  • 5:54

    value, so it's trying to show more of the image.

  • 5:58

    The reason it can't show all of the image and it

  • 6:01

    looks like it's being cut off is because

  • 6:04

    the border width is smaller than the border slice.

  • 6:07

    [? music playing ?]

  • 6:09

    [Think Vitamin Membership, membership.thinkvitamin.com]

Show full transcript