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.


Video Transcript

  • 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

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.